feat: Picker与DatePIcker新增插槽 (jd-opensource#1213)

lone2005 · Apr 19, 2022 · ce2fca0 · ce2fca0
1 parent f301c1a
commit ce2fca0
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 98 deletions.
diff --git a/src/packages/__VUE/datepicker/demo.vue b/src/packages/__VUE/datepicker/demo.vue
@@ -83,7 +83,8 @@
         }
       "
       v-model:visible="show5"
-    ></nut-datepicker>
+      ><nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-datepicker
+    >
     <!-- 分钟数递增步长设置 -->
     <nut-datepicker
       v-model="currentDate6"
@@ -161,7 +162,7 @@ export default createDemo({
           option.text += '月';
           break;
         case 'day':
-          option.text += '月';
+          option.text += '日';
           break;
         case 'hour':
           option.text += '时';
@@ -184,7 +185,7 @@ export default createDemo({
           option.text += '月';
           break;
         case 'day':
-          option.text += '月';
+          option.text += '日';
           break;
         case 'hour':
           option.text += '时';
@@ -238,6 +239,11 @@ export default createDemo({
           descList[index].value = selectedValue.join('-');
       }
     };
+
+    const alwaysFun = () => {
+      show5.value = false;
+      desc5.value = '永久有效';
+    };
     return {
       show,
       show2,
@@ -259,7 +265,8 @@ export default createDemo({
       confirm,
       formatter,
       formatter1,
-      filter
+      filter,
+      alwaysFun
     };
   }
 });

diff --git a/src/packages/__VUE/datepicker/doc.md b/src/packages/__VUE/datepicker/doc.md
@@ -198,7 +198,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
       :formatter="formatter"
       @confirm="confirm"
       v-model:visible="show"
-  ></nut-datepicker>
+  ><nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-datepicker>
 </template>
 <script>
   import { ref } from 'vue';
@@ -234,12 +234,17 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
         }
         return option;
       };
+      const alwaysFun = () => {
+        show.value = false;
+        desc.value = '永久有效';
+      };
       return {
         show,
         desc,
         currentDate,
         confirm,
-        formatter
+        formatter,
+        alwaysFun
       };
     }
   };
@@ -376,12 +381,17 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 | ok-text           | 确定按钮文案                                          | String  | 确定   |
 | cancel-text           | 取消按钮文案                                          | String  | 取消   |
 
-
-
 ### Events
 
 | 事件名  | 说明               | 回调参数     |
 |---------|--------------------|--------------|
 | confirm | 点击确定按钮时触发 | 	{ selectedValue, selectedOptions } |
 | close   | 关闭时触发         | 	{ selectedValue, selectedOptions } |
-| change   | 选项改变时触发         | { columnIndex, selectedValue, selectedOptions } |
+| change   | 选项改变时触发         | { columnIndex, selectedValue, selectedOptions } |
+
+### Slots
+
+| 事件名 | 说明           | 
+|--------|----------------|
+| default  | 自定义滑动数据底部区域 |
+| top  | 自定义滑动数据顶部区域 |
diff --git a/src/packages/__VUE/datepicker/index.taro.vue b/src/packages/__VUE/datepicker/index.taro.vue
@@ -10,6 +10,7 @@
     :title="title"
     @confirm="confirm"
     :isWrapTeleport="isWrapTeleport"
+    ><slot></slot
   ></nut-picker>
 </template>
 <script lang="ts">
@@ -30,7 +31,9 @@ function isDate(val: Date): val is Date {
   return Object.prototype.toString.call(val) === '[object Date]' && !isNaN(val.getTime());
 }
 
-const zhCNType = {
+const zhCNType: {
+  [props: string]: string;
+} = {
   day: '日',
   year: '年',
   month: '月',
@@ -201,7 +204,6 @@ export default create({
     });
 
     const columns = computed(() => {
-      // console.log(ranges.value);
       const val = ranges.value.map((res, columnIndex) => {
         return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
       });
@@ -217,35 +219,33 @@ export default create({
       selectedValue: (string | number)[];
       selectedOptions: PickerOption[];
     }) => {
-      if (['date', 'datetime'].includes(props.type)) {
-        let formatDate = [];
-        formatDate = selectedValue;
-        let date: Date;
-        if (props.type === 'date') {
-          state.currentDate = formatValue(
-            new Date(
-              formatDate[0],
-              formatDate[1] - 1,
-              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1]))
-            )
-          );
+      if (['date', 'datetime', 'datehour', 'month-day'].includes(props.type)) {
+        let formatDate: (number | string)[] = [];
+        selectedValue.forEach((item) => {
+          formatDate.push(item);
+        });
+        if (props.type == 'month-day') {
+          formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
+        }
+        const year = Number(formatDate[0]);
+        const month = Number(formatDate[1]) - 1;
+        const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+        let date: Date | null = null;
+
+        if (props.type === 'date' || props.type === 'month-day') {
+          date = new Date(year, month, day);
         } else if (props.type === 'datetime') {
-          state.currentDate = formatValue(
-            new Date(
-              formatDate[0],
-              formatDate[1] - 1,
-              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1])),
-              formatDate[3],
-              formatDate[4]
-            )
-          );
+          date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+        } else if (props.type === 'datehour') {
+          date = new Date(year, month, day, Number(formatDate[3]));
         }
+        state.currentDate = formatValue(date as Date);
       }
       emit('change', { columnIndex, selectedValue, selectedOptions });
     };
 
-    const formatterOption = (type, value) => {
-      const { filter, formatter, isShowChinese } = props;
+    const formatterOption = (type: string, value: string | number) => {
+      const { formatter, isShowChinese } = props;
       let fOption = null;
       if (formatter) {
         fOption = formatter(type, { text: padZero(value, 2), value: padZero(value, 2) });
@@ -276,8 +276,7 @@ export default create({
         }
       }
 
-      state.selectedValue[columnIndex] = arr[index].value;
-      // return { values: arr, defaultIndex: index };
+      (state.selectedValue as any)[columnIndex] = arr[index].value;
       return props.filter ? props.filter(type, arr) : arr;
     };
 

diff --git a/src/packages/__VUE/datepicker/index.vue b/src/packages/__VUE/datepicker/index.vue
@@ -10,10 +10,12 @@
     :title="title"
     @confirm="confirm"
     :isWrapTeleport="isWrapTeleport"
-  ></nut-picker>
+  >
+    <slot></slot>
+  </nut-picker>
 </template>
 <script lang="ts">
-import { toRefs, watch, computed, reactive, onMounted, onBeforeMount } from 'vue';
+import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
 import picker from '../picker/index.vue';
 import { popupProps } from '../popup/index.vue';
@@ -30,7 +32,9 @@ function isDate(val: Date): val is Date {
   return Object.prototype.toString.call(val) === '[object Date]' && !isNaN(val.getTime());
 }
 
-const zhCNType = {
+const zhCNType: {
+  [props: string]: string;
+} = {
   day: '日',
   year: '年',
   month: '月',
@@ -197,6 +201,8 @@ export default create({
           result = result.slice(0, 4);
           break;
       }
+
+      console.log('result', result);
       return result;
     });
 
@@ -217,36 +223,38 @@ export default create({
       selectedValue: (string | number)[];
       selectedOptions: PickerOption[];
     }) => {
-      if (['date', 'datetime'].includes(props.type)) {
-        let formatDate = [];
-        formatDate = selectedValue;
-        let date: Date;
-        if (props.type === 'date') {
-          state.currentDate = formatValue(
-            new Date(
-              formatDate[0],
-              formatDate[1] - 1,
-              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1]))
-            )
-          );
+      console.log('滚动', selectedValue);
+      if (['date', 'datetime', 'datehour', 'month-day'].includes(props.type)) {
+        let formatDate: (number | string)[] = [];
+        selectedValue.forEach((item) => {
+          formatDate.push(item);
+        });
+        if (props.type == 'month-day' && formatDate.length < 3) {
+          formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
+        }
+
+        const year = Number(formatDate[0]);
+        const month = Number(formatDate[1]) - 1;
+        const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+        let date: Date | null = null;
+        console.log(year, month, day);
+        if (props.type === 'date' || props.type === 'month-day') {
+          date = new Date(year, month, day);
         } else if (props.type === 'datetime') {
-          state.currentDate = formatValue(
-            new Date(
-              formatDate[0],
-              formatDate[1] - 1,
-              Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1])),
-              formatDate[3],
-              formatDate[4]
-            )
-          );
+          date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+        } else if (props.type === 'datehour') {
+          date = new Date(year, month, day, Number(formatDate[3]));
         }
+        state.currentDate = formatValue(date as Date);
+
+        console.log(state.currentDate);
       }
 
       emit('change', { columnIndex, selectedValue, selectedOptions });
     };
 
-    const formatterOption = (type, value) => {
-      const { filter, formatter, isShowChinese } = props;
+    const formatterOption = (type: string, value: string | number) => {
+      const { formatter, isShowChinese } = props;
       let fOption = null;
       if (formatter) {
         fOption = formatter(type, { text: padZero(value, 2), value: padZero(value, 2) });
@@ -276,8 +284,7 @@ export default create({
           index++;
         }
       }
-      state.selectedValue[columnIndex] = arr[index].value;
-      // return { values: arr, defaultIndex: index };
+      (state.selectedValue as any)[columnIndex] = arr[index].value;
       return props.filter ? props.filter(type, arr) : arr;
     };
 

diff --git a/src/packages/__VUE/infiniteloading/demo.vue b/src/packages/__VUE/infiniteloading/demo.vue
@@ -90,6 +90,7 @@ export default createDemo({
 
     const refreshLoadMore = (done) => {
       setTimeout(() => {
+        console.log('demo 加载更多');
         const curLen = data.refreshList.length;
         for (let i = curLen; i < curLen + 10; i++) {
           data.refreshList.push(`${i}`);
@@ -102,6 +103,8 @@ export default createDemo({
     const refresh = (done) => {
       setTimeout(() => {
         proxy.$toast.text('刷新成功');
+        data.refreshList = data.refreshList.slice(0, 10);
+        refreshHasMore.value = true;
         done();
       }, 1000);
     };

diff --git a/src/packages/__VUE/infiniteloading/index.vue b/src/packages/__VUE/infiniteloading/index.vue
@@ -117,11 +117,9 @@ export default create({
           : `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`
       };
     });
-
     const getParentElement = (el: HTMLElement) => {
       return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
     };
-
     const requestAniFrame = () => {
       return (
         window.requestAnimationFrame ||
@@ -220,13 +218,20 @@ export default create({
     };
 
     const touchEnd = () => {
-      if (state.distance < state.refreshMaxH) {
-        state.distance = 0;
-      } else {
-        emit('refresh', refreshDone);
+      if (state.distance) {
+        if (state.distance < state.refreshMaxH) {
+          state.distance = 0;
+        } else {
+          emit('refresh', refreshDone);
+        }
       }
     };
 
+    // 滚动监听对象
+    const getParentElement = (el: HTMLElement) => {
+      return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
+    };
+
     onMounted(() => {
       const parentElement = getParentElement(state.scroller as HTMLElement) as Node & ParentNode;
       state.scrollEl = props.useWindow ? window : parentElement;