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

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
     };
   }
 });

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  | 自定义滑动数据顶部区域 |

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;
     };
 

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;
     };
 

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);
     };

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;

src/packages/__VUE/picker/demo.vue

@@ -16,8 +16,7 @@
       title="城市选择"
       @change="change"
       @confirm="(options) => confirm('index', options)"
-    >
-    </nut-picker>
+    ></nut-picker>
 
     <h2>默认选中项</h2>
     <nut-cell
@@ -90,6 +89,25 @@
       title="城市选择"
       @confirm="(options) => confirm('async', options)"
     ></nut-picker>
+
+    <h2>自定义按钮</h2>
+    <nut-cell
+      title="请选择有效日期"
+      :desc="effect"
+      @click="
+        () => {
+          showEffect = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model:visible="showEffect"
+      :columns="effectColumns"
+      title="日期选择"
+      @confirm="(options) => confirm('effect', options)"
+    >
+      <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-picker
+    >
   </div>
 </template>
 <script lang="ts">
@@ -174,6 +192,20 @@ export default createDemo({
       }
     ]);
 
+    const effectColumns = ref([
+      { text: '2022-01', value: 'January' },
+      { text: '2022-02', value: 'February' },
+      { text: '2022-03', value: 'March' },
+      { text: '2022-04', value: 'April' },
+      { text: '2022-05', value: 'May' },
+      { text: '2022-06', value: 'June' },
+      { text: '2022-07', value: 'July' },
+      { text: '2022-08', value: 'August' },
+      { text: '2022-09', value: 'September' },
+      { text: '2022-10', value: 'October' },
+      { text: '2022-11', value: 'November' },
+      { text: '2022-12', value: 'December' }
+    ]);
     const asyncColumns = ref<PickerOption[]>([]);
 
     const show = ref(false);
@@ -181,13 +213,15 @@ export default createDemo({
     const showMultiple = ref(false);
     const showCascader = ref(false);
     const showAsync = ref(false);
+    const showEffect = ref(false);
 
     const desc = reactive({
       index: '',
       defult: '',
       multiple: '',
       cascader: '',
-      async: ''
+      async: '',
+      effect: ''
     });
 
     const open = (index: number) => {
@@ -235,6 +269,10 @@ export default createDemo({
       console.log(selectedValue);
     };
 
+    const alwaysFun = () => {
+      showEffect.value = false;
+      desc.effect = '永远有效';
+    };
     return {
       selectedValue,
       asyncValue,
@@ -250,12 +288,12 @@ export default createDemo({
       cascaderColumns,
       confirm,
       change,
-      asyncColumns
+      asyncColumns,
+      effectColumns,
+      showEffect,
+      alwaysFun
     };
   }
 });
 </script>
-<style lang="scss" scoped>
-.demo {
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/picker/doc.md

@@ -308,6 +308,68 @@ columns 属性可以通过二维数组的形式配置多列选择。
 ```
 :::
 
+### 自定义按钮
+
+Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
+
+:::demo
+```html
+<template>
+  <nut-cell title="请选择截止时间" :desc="desc" @click="()=>{show=true}"></nut-cell>
+  <nut-picker
+    v-model:visible="show"
+    :columns="asyncColumns"
+    title="日期选择"
+    @confirm="confirm"
+  >
+   <nut-button block  @click="alwaysFun">永远有效</nut-button>
+  </nut-picker>
+</template>
+<script>
+  import { ref, onMounted } from 'vue';
+  export default {
+    setup(props) {
+      const show = ref(false);
+      const desc = ref('');
+      const effectColumns = ref([]);
+
+      onMounted(() => {
+        // 用于模拟接口请求
+        setTimeout(() => {
+          effectColumns.value = [
+            { text: '2022-01', value: 'January' },
+            { text: '2022-02', value: 'February' },
+            { text: '2022-03', value: 'March' },
+            { text: '2022-04', value: 'April' },
+            { text: '2022-05', value: 'May' },
+            { text: '2022-06', value: 'June' },
+            { text: '2022-07', value: 'July' },
+            { text: '2022-08', value: 'August' },
+            { text: '2022-09', value: 'September' },
+            { text: '2022-10', value: 'October' },
+            { text: '2022-11', value: 'November' },
+            { text: '2022-12', value: 'December' }
+          ];
+
+        }, 500);
+      });
+      
+      const confirm = ( { selectedValue,selectedOptions })=>{
+        desc.value = selectedValue.join(',');
+      }
+
+      const alwaysFun = () => {
+        showEffect.value = false;
+        desc.effect = '永远有效';
+      };
+
+      return {show,desc,alwaysFun,effectColumns, confirm};
+    }
+  };
+</script>
+```
+:::
+
 ## API
 
 ### Props
@@ -337,3 +399,10 @@ columns 属性可以通过二维数组的形式配置多列选择。
 | confirm  | 点击确定按钮时触发 | { selectedValue, selectedOptions } |
 | close  | 点击取消按钮时触发 | { selectedValue, selectedOptions } |
 | change  | 选项发生改变时触发 | { columnIndex, selectedValue, selectedOptions } |
+
+### Slots
+
+| 事件名 | 说明           | 
+|--------|----------------|
+| default  | 自定义滑动数据底部区域 |
+| top  | 自定义滑动数据顶部区域 |

src/packages/__VUE/picker/index.taro.vue

@@ -18,7 +18,7 @@
           okText || translate('confirm')
         }}</view>
       </view>
-
+      <slot name="top"></slot>
       <view class="nut-picker__column">
         <view class="nut-picker__hairline"></view>
         <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
@@ -36,6 +36,7 @@
           ></nut-picker-column>
         </view>
       </view>
+      <slot name="default"></slot>
     </nut-popup>
   </view>
 </template>

src/packages/__VUE/picker/index.vue

@@ -20,6 +20,8 @@
         }}</view>
       </view>
 
+      <slot name="top"></slot>
+
       <view class="nut-picker__column">
         <view class="nut-picker__hairline"></view>
         <view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
@@ -37,6 +39,8 @@
           ></nut-picker-column>
         </view>
       </view>
+
+      <slot name="default"></slot>
     </nut-popup>
   </view>
 </template>

src/sites/mobile-taro/vue/src/app.config.ts

@@ -58,6 +58,7 @@ export default {
     {
       root: 'exhibition',
       pages: [
+        'pages/avatar/index',
         'pages/list/index',
         'pages/progress/index',
         'pages/circleprogress/index',
@@ -65,7 +66,6 @@ export default {
         'pages/empty/index',
         'pages/steps/index',
         'pages/swiper/index',
-        'pages/avatar/index',
         'pages/price/index',
         'pages/imagepreview/index',
         'pages/countup/index',
@@ -88,6 +88,8 @@ export default {
         'pages/sku/index',
         'pages/card/index',
         'pages/ecard/index',
+        'pages/addresslist/index',
+        'pages/category/index',
         'pages/comment/index'
       ]
     }

src/sites/mobile-taro/vue/src/dentry/pages/datepicker/index.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"
@@ -235,6 +236,10 @@ export default {
           descList[index].value = selectedValue.join('-');
       }
     };
+    const alwaysFun = () => {
+      show5.value = false;
+      desc5.value = '永久有效';
+    };
     return {
       show,
       show2,
@@ -256,7 +261,8 @@ export default {
       confirm,
       formatter,
       formatter1,
-      filter
+      filter,
+      alwaysFun
     };
   }
 };

src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue

@@ -1,20 +1,35 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-cell title="请选择城市" :desc="index" @click="open(0)"></nut-cell>
+    <nut-cell
+      title="请选择城市"
+      :desc="index"
+      @click="
+        () => {
+          show = true;
+        }
+      "
+    ></nut-cell>
     <nut-picker
       v-model:visible="show"
       :columns="columns"
       title="城市选择"
       @change="change"
       @confirm="(options) => confirm('index', options)"
-    >
-    </nut-picker>
+    ></nut-picker>
 
     <h2>默认选中项</h2>
-    <nut-cell title="请选择城市" :desc="defult" @click="open(1)"></nut-cell>
+    <nut-cell
+      title="请选择城市"
+      :desc="defult"
+      @click="
+        () => {
+          showDefult = true;
+        }
+      "
+    ></nut-cell>
     <nut-picker
-      v-model="selectedVal"
+      v-model="selectedValue"
       v-model:visible="showDefult"
       :columns="columns"
       title="城市选择"
@@ -23,7 +38,15 @@
     </nut-picker>
 
     <h2>多列样式</h2>
-    <nut-cell title="请选择时间" :desc="multiple" @click="open(2)"></nut-cell>
+    <nut-cell
+      title="请选择时间"
+      :desc="multiple"
+      @click="
+        () => {
+          showMultiple = true;
+        }
+      "
+    ></nut-cell>
     <nut-picker
       v-model:visible="showMultiple"
       :columns="multipleColumns"
@@ -33,7 +56,15 @@
     </nut-picker>
 
     <h2>多级联动</h2>
-    <nut-cell title="请选择地址" :desc="cascader" @click="open(3)"></nut-cell>
+    <nut-cell
+      title="请选择地址"
+      :desc="cascader"
+      @click="
+        () => {
+          showCascader = true;
+        }
+      "
+    ></nut-cell>
     <nut-picker
       v-model:visible="showCascader"
       :columns="cascaderColumns"
@@ -42,7 +73,15 @@
     ></nut-picker>
 
     <h2>异步获取</h2>
-    <nut-cell title="请选择地址" :desc="async" @click="open(4)"></nut-cell>
+    <nut-cell
+      title="请选择地址"
+      :desc="async"
+      @click="
+        () => {
+          showAsync = true;
+        }
+      "
+    ></nut-cell>
     <nut-picker
       v-model="asyncValue"
       v-model:visible="showAsync"
@@ -50,6 +89,25 @@
       title="城市选择"
       @confirm="(options) => confirm('async', options)"
     ></nut-picker>
+
+    <h2>自定义按钮</h2>
+    <nut-cell
+      title="请选择有效日期"
+      :desc="effect"
+      @click="
+        () => {
+          showEffect = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model:visible="showEffect"
+      :columns="effectColumns"
+      title="日期选择"
+      @confirm="(options) => confirm('effect', options)"
+    >
+      <nut-button block type="primary" @click="alwaysFun">永远有效</nut-button></nut-picker
+    >
   </div>
 </template>
 <script lang="ts">
@@ -58,7 +116,7 @@ import { PickerOption } from '../../../../../../../packages/__VUE/picker/types';
 export default {
   props: {},
   setup() {
-    const selectedVal = ref(['ZheJiang']);
+    const selectedValue = ref(['ZheJiang']);
     const asyncValue = ref<string[]>([]);
     const columns = ref([
       { text: '南京市', value: 'NanJing' },
@@ -132,6 +190,20 @@ export default {
       }
     ]);
 
+    const effectColumns = ref([
+      { text: '2022-01', value: 'January' },
+      { text: '2022-02', value: 'February' },
+      { text: '2022-03', value: 'March' },
+      { text: '2022-04', value: 'April' },
+      { text: '2022-05', value: 'May' },
+      { text: '2022-06', value: 'June' },
+      { text: '2022-07', value: 'July' },
+      { text: '2022-08', value: 'August' },
+      { text: '2022-09', value: 'September' },
+      { text: '2022-10', value: 'October' },
+      { text: '2022-11', value: 'November' },
+      { text: '2022-12', value: 'December' }
+    ]);
     const asyncColumns = ref<PickerOption[]>([]);
 
     const show = ref(false);
@@ -139,13 +211,15 @@ export default {
     const showMultiple = ref(false);
     const showCascader = ref(false);
     const showAsync = ref(false);
+    const showEffect = ref(false);
 
     const desc = reactive({
       index: '',
       defult: '',
       multiple: '',
       cascader: '',
-      async: ''
+      async: '',
+      effect: ''
     });
 
     const open = (index: number) => {
@@ -183,19 +257,22 @@ export default {
         ];
 
         asyncValue.value = ['ZangZu'];
-      }, 1000);
+      }, 500);
     });
 
     const confirm = (tag: string, { selectedValue }: { selectedValue: string[] }) => {
-      console.log('确定', selectedVal.value);
-      desc[tag] = selectedValue.join(',');
+      (desc as any)[tag] = selectedValue.join(',');
     };
     const change = ({ selectedValue }: { selectedValue: string[] }) => {
       console.log(selectedValue);
     };
 
+    const alwaysFun = () => {
+      showEffect.value = false;
+      desc.effect = '永远有效';
+    };
     return {
-      selectedVal,
+      selectedValue,
       asyncValue,
       columns,
       show,
@@ -207,9 +284,12 @@ export default {
       open,
       multipleColumns,
       cascaderColumns,
-      asyncColumns,
       confirm,
-      change
+      change,
+      asyncColumns,
+      effectColumns,
+      showEffect,
+      alwaysFun
     };
   }
 };