Merge branch 'next' of https://github.com/jdf2e/nutui into next

motian · Jul 29, 2022 · 4f1bee5 · 4f1bee5
2 parents 6f6dc89 + 6cf46e9
commit 4f1bee5
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 25 deletions.
diff --git a/src/packages/__VUE/address/demo.vue b/src/packages/__VUE/address/demo.vue
@@ -72,7 +72,13 @@
       :default-icon="defaultIcon"
       :selected-icon="selectedIcon"
       :close-btn-icon="closeBtnIcon"
-    ></nut-address>
+    >
+      <template #bottom>
+        <div class="nut-address-custom-buttom">
+          <div class="btn">自定义按钮</div>
+        </div>
+      </template>
+    </nut-address>
 
     <h2>{{ translate('change') }}</h2>
     <nut-cell :title="translate('title')" :desc="four" is-link @click="showAddressOther"></nut-cell>

diff --git a/src/packages/__VUE/address/doc.en-US.md b/src/packages/__VUE/address/doc.en-US.md
@@ -578,4 +578,10 @@ If you want to select a province, you need to set the region ID in the order of
 |----- | ----- | ----- 
 | type | Selected Type  |  exist/custom/custom2
 | data | Selected Data | {} 
+
+
+## Slot
+| Attribute | Description | 
+|----- | ----- |  
+| bottom `3.1.23` | Bottom slot |  
 
diff --git a/src/packages/__VUE/address/doc.md b/src/packages/__VUE/address/doc.md
@@ -332,7 +332,13 @@ app.use(Elevator);
       :default-icon="defaultIcon"
       :selected-icon="selectedIcon"
       :close-btn-icon="closeBtnIcon"
-  ></nut-address>
+  >
+    <template #bottom>
+        <div class="nut-address-custom-buttom">
+          <div class="btn">自定义按钮</div>
+        </div>
+    </template>
+  </nut-address>
 </template>
 <script>
   import { ref,reactive,toRefs } from 'vue';
@@ -587,4 +593,8 @@ app.use(Elevator);
 |----- | ----- | ----- 
 | type | 地址选择类型 exist/custom/custom2  |  exist/custom/custom2
 | data | 选择地址的值,custom 时，addressStr 为选择的地址组合 | {} 
-
+
+## Slot
+| 字段 | 说明 | 
+|----- | ----- |  
+| bottom `3.1.23` | 可自定义底部 |  
diff --git a/src/packages/__VUE/address/index.scss b/src/packages/__VUE/address/index.scss
@@ -152,4 +152,22 @@
       }
     }
   }
+
+  &-custom-buttom {
+    width: 100%;
+    height: 54px;
+    padding: 6px 0px 0;
+    border-top: 1px solid #f2f2f2;
+    .btn {
+      width: 90%;
+      height: 42px;
+      line-height: 42px;
+      margin: auto;
+      text-align: center;
+      background: $button-primary-background-color;
+      border-radius: 21px;
+      font-size: 15px;
+      color: $white;
+    }
+  }
 }
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
@@ -122,6 +122,9 @@
         <div class="choose-other" @click="switchModule" v-if="isShowCustomAddress">
           <div class="btn">{{ customAndExistTitle || translate('chooseAnotherAddress') }}</div>
         </div>
+        <template v-if="!isShowCustomAddress">
+          <slot name="bottom"></slot>
+        </template>
       </view>
     </view>
   </nut-popup>

diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
@@ -124,10 +124,13 @@
             </li>
           </ul>
         </div>
+
         <div class="choose-other" @click="switchModule" v-if="isShowCustomAddress">
           <div class="btn">{{ customAndExistTitle || translate('chooseAnotherAddress') }}</div>
         </div>
       </view>
+
+      <slot name="bottom"></slot>
     </view>
   </nut-popup>
 </template>

diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
@@ -129,6 +129,25 @@
     >
       <nut-button block type="primary" @click="alwaysFun">{{ translate('always') }}</nut-button></nut-picker
     >
+
+    <!-- <h2>异步获取</h2>
+    <nut-cell
+      :title="translate('validTime')"
+      :desc="effect"
+      @click="
+        () => {
+          showJK = true;
+        }
+      "
+    ></nut-cell>
+    <nut-picker
+      v-model:visible="showJK"
+      :columns="jkColumns"
+      :title="translate('chooseDate')"
+      @confirm="(options) => confirm('effect', options)"
+      @change="changeJK"
+    ></nut-picker
+    > -->
   </div>
 </template>
 <script lang="ts">
@@ -138,7 +157,7 @@ import { PickerOption } from './types';
 const { createDemo, translate } = createComponent('picker');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { Internation } from './doc.en';
-import { convertListToOptions } from '../cascader/helper';
+
 useTranslate(Internation);
 export default createDemo({
   props: {},
@@ -219,6 +238,58 @@ export default createDemo({
       }
     ]);
 
+    const bf = {
+      ZheJiang: [
+        {
+          text: translate('hangZhou'),
+          value: 'HangZhou',
+          children: [
+            { text: translate('xiHu'), value: 'XiHu' },
+            { text: translate('yuHang'), value: 'YuHang' }
+          ]
+        },
+        {
+          text: translate('wenZhou'),
+          value: 'WenZhou',
+          children: [
+            { text: translate('luCheng'), value: 'LuCheng' },
+            { text: translate('ouHai'), value: 'OuHai' }
+          ]
+        }
+      ],
+      FuJian: [
+        {
+          text: translate('fuZhou'),
+          value: 'FuZhou',
+          children: [
+            { text: translate('guLou'), value: 'GuLou' },
+            { text: translate('taiJiang'), value: 'TaiJiang' }
+          ]
+        },
+        {
+          text: translate('xiaMen'),
+          value: 'XiaMen',
+          children: [
+            { text: translate('siMing'), value: 'SiMing' },
+            { text: translate('haiCang'), value: 'HaiCang' }
+          ]
+        }
+      ]
+    };
+
+    const jkColumns = ref([
+      {
+        text: translate('zheJiang'),
+        value: 'ZheJiang',
+        children: []
+      },
+      {
+        text: translate('fuJian'),
+        value: 'FuJian',
+        children: []
+      }
+    ]);
+
     const effectColumns = ref([
       { text: '2022-01', value: 'January' },
       { text: '2022-02', value: 'February' },
@@ -243,6 +314,8 @@ export default createDemo({
     const showEffect = ref(false);
     const showTile = ref(false);
 
+    const showJK = ref(false);
+
     const desc = reactive({
       index: '',
       defult: '',
@@ -301,6 +374,18 @@ export default createDemo({
       console.log(selectedValue);
     };
 
+    // change
+    const changeJK = (data) => {
+      const { columnIndex, selectedOptions, selectedValue } = data;
+      if (columnIndex == 0) {
+        jkColumns.value.forEach((colum) => {
+          if (colum.value == selectedValue[columnIndex] && colum.children.length == 0) {
+            colum.children = bf[selectedValue[columnIndex]];
+          }
+        });
+      }
+    };
+
     const alwaysFun = () => {
       showEffect.value = false;
       desc.effect = translate('always');
@@ -327,7 +412,10 @@ export default createDemo({
       translate,
       selectedTime,
       columsNum,
-      showTile
+      showTile,
+      showJK,
+      jkColumns,
+      changeJK
     };
   }
 });

diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
@@ -51,6 +51,16 @@ import { createComponent } from '@/packages/utils/create';
 import popup, { popupProps } from '../popup/index.vue';
 import column from './Column.vue';
 const { componentName, create, translate } = createComponent('picker');
+// import { PickerColumnOption, PickerOption, TouchParams } from './types';
+
+export interface PickerOption {
+  text: string | number;
+  value: string | number;
+  disabled?: string;
+  children?: PickerOption[];
+  className?: string | number;
+}
+
 export default create({
   components: {
     [column.name]: column,
@@ -75,7 +85,7 @@ export default create({
       default: ''
     },
     columns: {
-      type: Array,
+      type: Array as PropType<(PickerOption | PickerOption[])[]>,
       default: () => {
         return [];
       }
@@ -94,7 +104,7 @@ export default create({
   setup(props, { emit }) {
     const state = reactive({
       show: false,
-      formattedColumns: props.columns as import('./types').PickerOption[]
+      formattedColumns: props.columns
     });
 
     // 选中项
@@ -110,20 +120,18 @@ export default create({
     });
 
     const selectedOptions = computed(() => {
-      let optins: import('./types').PickerOption[] = [];
-      (columnsList.value as import('./types').PickerOption[][]).map(
-        (column: import('./types').PickerOption[], index: number) => {
-          let currOptions = [];
-          currOptions = column.filter((item) => item.value == defaultValues.value[index]);
-          optins.push(currOptions[0]);
-        }
-      );
+      let optins: PickerOption[] = [];
+      (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
+        let currOptions = [];
+        currOptions = column.filter((item) => item.value == defaultValues.value[index]);
+        optins.push(currOptions[0]);
+      });
 
       return optins;
     });
     // 当前类型
     const columnsType = computed(() => {
-      const firstColumn: import('./types').PickerOption = state.formattedColumns[0];
+      const firstColumn: PickerOption | PickerOption[] = state.formattedColumns[0];
       if (firstColumn) {
         if (Array.isArray(firstColumn)) {
           return 'multiple';
@@ -138,19 +146,19 @@ export default create({
     const columnsList = computed(() => {
       switch (columnsType.value) {
         case 'multiple':
-          return state.formattedColumns;
+          return state.formattedColumns as PickerOption[][];
         case 'cascade':
           // 级联数据处理
-          return formatCascade(state.formattedColumns, defaultValues.value);
+          return formatCascade(state.formattedColumns as PickerOption[], defaultValues.value);
         default:
-          return [state.formattedColumns];
+          return [state.formattedColumns] as PickerOption[][];
       }
     });
 
     // 级联数据格式化
-    const formatCascade = (columns: import('./types').PickerOption[], defaultValues: (number | string)[]) => {
-      const formatted: import('./types').PickerOption[][] = [];
-      let cursor: import('./types').PickerOption = {
+    const formatCascade = (columns: PickerOption[], defaultValues: (number | string)[]) => {
+      const formatted: PickerOption[][] = [];
+      let cursor: PickerOption = {
         text: '',
         value: '',
         children: columns
@@ -159,7 +167,7 @@ export default create({
       let columnIndex = 0;
 
       while (cursor && cursor.children) {
-        const options: import('./types').PickerOption[] = cursor.children;
+        const options: PickerOption[] = cursor.children;
         const value = defaultValues[columnIndex];
         let index = options.findIndex((columnItem) => columnItem.value == value);
         if (index == -1) index = 0;
@@ -180,7 +188,7 @@ export default create({
       emit('update:visible', false);
     };
 
-    const changeHandler = (columnIndex: number, option: import('./types').PickerOption) => {
+    const changeHandler = (columnIndex: number, option: PickerOption) => {
       if (option && Object.keys(option).length) {
         if (columnsType.value === 'cascade') {
           defaultValues.value[columnIndex] = option.value ? option.value : '';
@@ -256,7 +264,8 @@ export default create({
     watch(
       () => props.columns,
       (val) => {
-        if (val.length) state.formattedColumns = val as import('./types').PickerOption[];
+        console.log('更新 columes');
+        if (val.length) state.formattedColumns = val as PickerOption[];
       }
     );