feat(components): add a silder hover switch about highlight date

ISSUES CLOSED: #29
xpyjs · Jun 29, 2022 · 9ab0ebf · 9ab0ebf
1 parent 0224cf8
commit 9ab0ebf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/docs/docs/slider.md b/docs/docs/slider.md
@@ -74,6 +74,12 @@
 
 设置滑块样式是否扁平化。
 
+### highlightDate <Badge text="+v1.0.2" type="tip" />
+
+<DataParameter t="Boolean" d="false" />
+
+允许鼠标悬停高亮表头对应日期
+
 ### label
 
 <DataParameter t="String" />

diff --git a/src/App.vue b/src/App.vue
@@ -79,6 +79,7 @@
           :linked-resize="true"
           progress
           progress-decimal
+          highlight-date
         >
           <!-- <template v-slot="data">
           <div>{{ data.name }}</div>

diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
@@ -50,7 +50,8 @@ const {
   resizeRight,
   linkedResize,
   progress,
-  progressDecimal
+  progressDecimal,
+  highlightDate
 } = toRefs(props);
 
 const { oneDayWidth, GtParam } = useParam();
@@ -268,8 +269,10 @@ const { addShowDate, clearShowDateList } = useShowDate();
 function onMouseEnter() {
   showProgressBtn.value = true;
 
-  addShowDate(data.start);
-  addShowDate(data.end);
+  if (highlightDate.value) {
+    addShowDate(data.start);
+    addShowDate(data.end);
+  }
 
   if (!canMove.value) return;
   showCtrlChunk.value = true;

diff --git a/src/components/slider/props.ts b/src/components/slider/props.ts
@@ -106,5 +106,13 @@ export default {
       }
       return true;
     }
+  },
+
+  /**
+   * 允许鼠标悬停高亮表头对应日期
+   */
+  highlightDate: {
+    type: Boolean,
+    default: false
   }
 };
diff --git a/typings/packages/slider.d.ts b/typings/packages/slider.d.ts
@@ -12,6 +12,8 @@ declare class XGanttSliderComponent extends XComponent {
 
   flat: boolean;
 
+  highlightDate: boolean;
+
   label: string;
 
   linkedResize: boolean;