docs(slider): 📃 update docs

xpyjs · May 30, 2023 · cdb94a3 · cdb94a3
1 parent bfcf951
commit cdb94a3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/demo/App.vue b/demo/App.vue
@@ -47,6 +47,7 @@
         :show-today="showToday"
         :show-expand="showExpand"
         :data="dataList"
+        :unit="unit"
         :links="linkList"
         :header-style="headerStyle"
         :body-style="bodyStyle"
@@ -80,6 +81,7 @@
           :linked-resize="true"
           :progress="useProgress"
           progress-decimal
+          move-by-unit
         >
           <!-- <template v-slot="row">
           <div>{{ row.name }}</div>
@@ -179,6 +181,7 @@
       <button @click="() => (colSize = 'normal')">中</button>
       <button @click="() => (colSize = 'large')">大</button>
     </div>
+    <button @click="changeUnit1">切换单位</button>
     <button @click="() => useProgress = !useProgress">使用进度</button>
   </div>
 
@@ -413,6 +416,7 @@ export default defineComponent({
       } as any,
       colSize: 'normal',
       showSettingBtn: true,
+      unit: 'day',
 
       isDark2: false,
       dataList2: [] as any[],
@@ -477,7 +481,7 @@ export default defineComponent({
       this.dataList.push({
         id: INDEX++,
         startTime: `2023-08-${s++}`,
-        endTime: `2023-10-${e++}`,
+        endTime: `2023-08-${e++}`,
         ttt: {
           a: 'aaa',
           b: 'bbb'
@@ -501,7 +505,7 @@ export default defineComponent({
         this.dataList[index]['children'].push({
           id: INDEX++,
           startTime: `2023-08-${s++}`,
-          endTime: `2023-10-${e++}`,
+          endTime: `2023-08-${e++}`,
           name: '子数据: ' + s,
           ttt: {
             a: 's-aaa',
@@ -526,7 +530,7 @@ export default defineComponent({
         this.dataList[0]['children'][index]['children'].push({
           id: INDEX++,
           startTime: `2023-08-${s++}`,
-          endTime: `2023-10-${e++}`,
+          endTime: `2023-08-${e++}`,
           name: '孙数据: ' + s,
           ttt: {
             a: 'gs-aaa',
@@ -541,24 +545,24 @@ export default defineComponent({
 
     // 添加2号数据
     this.dataList2 = [
-      // {
-      //   index: INDEX++,
-      //   startDate: '2023-11-01',
-      //   endDate: '2023-11-10',
-      //   name: '2号数据: 1'
-      // },
-      // {
-      //   index: INDEX++,
-      //   startDate: '2023-11-11',
-      //   endDate: '2023-11-20',
-      //   name: '2号数据: 2'
-      // },
-      // {
-      //   index: INDEX++,
-      //   startDate: '2023-11-21',
-      //   endDate: '2023-11-30',
-      //   name: '2号数据: 3'
-      // }
+      {
+        index: INDEX++,
+        startDate: '2023-05-01',
+        endDate: '2023-05-10',
+        name: '2号数据: 1'
+      },
+      {
+        index: INDEX++,
+        startDate: '2023-05-11',
+        endDate: '2023-05-20',
+        name: '2号数据: 2'
+      },
+      {
+        index: INDEX++,
+        startDate: '2023-05-21',
+        endDate: '2023-05-30',
+        name: '2号数据: 3'
+      }
     ];
 
     // 添加3号数据
@@ -638,11 +642,13 @@ export default defineComponent({
     },
 
     merge4: function (data: any) {
-      return data.row.id % 4 !== 0;
+      // return data.row.id % 4 !== 0;
+      return false
     },
 
     merge5: function (data: any) {
-      return data.row.id % 5 !== 0;
+      // return data.row.id % 5 !== 0;
+      return false
     },
 
     handleMove: function ({
@@ -814,6 +820,12 @@ export default defineComponent({
       }
     },
 
+    changeUnit1() {
+      const u = ['month', 'week', 'day', 'hour'];
+      this.unit = u[(u.indexOf(this.unit) + 1) % u.length];
+      console.log('this.unit', this.unit);
+    },
+
     onAddLink(
       link: any,
       data: { from: any; to: any },

diff --git a/docs/docs/slider.md b/docs/docs/slider.md
@@ -130,6 +130,14 @@
 
 如果设置了 `true`，则意味着滑块可以被任意拖动。当拖动结束时，修改数据，同时会抛出 [`move-slider`](./root.html#move-slider) 事件。
 
+### move-by-unit
+
+<DataParameter t="Boolean" d="false" />
+
+设置滑块组件移动时，是否按照单位进行移动。如果设置为 `true`，则会按照单位进行移动，否则按照像素进行移动。
+
+目前是基于 `hour` 和 `day` 两个单位进行移动，这取决于根组件中 [`unit`](./root.html#unit) 属性的值。
+
 ### progress
 
 <DataParameter t="Boolean" d="false" />