@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/picker/picker.vue

@@ -14,7 +14,7 @@
     >
       <template #content>
         <view
-          :style="tools._style([customStyle])"
+          :style="'' + tools._style([customStyle])"
           :class="classPrefix + ' ' + tClass"
         >
           <view
@@ -26,7 +26,7 @@
               :class="classPrefix + '__cancel ' + tClassCancel"
               @click="onCancel"
             >
-              {{ cancelBtn }}
+              {{ globalConfig.cancel }}
             </view>
             <view :class="classPrefix + '__title ' + tClassTitle">
               {{ title }}
@@ -36,13 +36,13 @@
               :class="classPrefix + '__confirm ' + tClassConfirm"
               @click="onConfirm"
             >
-              {{ confirmBtn }}
+              {{ globalConfig.confirm }}
             </view>
           </view>
           <slot name="header" />
           <slot name="content" />
           <view
-            :class="tools.cls(classPrefix + '__main', [])"
+            :class="'' + tools.cls(classPrefix + '__main', [])"
             disable-scroll
           >
             <slot />
@@ -60,7 +60,7 @@
 
     <block v-else>
       <view
-        :style="tools._style([customStyle])"
+        :style="'' + tools._style([customStyle])"
         :class="classPrefix + ' ' + tClass"
       >
         <view
@@ -72,7 +72,7 @@
             :class="classPrefix + '__cancel ' + tClassCancel"
             @click="onCancel"
           >
-            {{ cancelBtn }}
+            {{ globalConfig.cancel }}
           </view>
           <view :class="classPrefix + '__title ' + tClassTitle">
             {{ title }}
@@ -82,13 +82,13 @@
             :class="classPrefix + '__confirm ' + tClassConfirm"
             @click="onConfirm"
           >
-            {{ confirmBtn }}
+            {{ globalConfig.confirm }}
           </view>
         </view>
         <slot name="header" />
         <slot name="content" />
         <view
-          :class="tools.cls(classPrefix + '__main', [])"
+          :class="'' + tools.cls(classPrefix + '__main', [])"
           disable-scroll
         >
           <slot />
@@ -114,193 +114,200 @@ import useCustomNavbar from '../mixins/using-custom-navbar';
 import tools from '../common/utils.wxs';
 import { ParentMixin, RELATION_MAP } from '../common/relation';
 
-const name = `${prefix}-picker`;
+import usingConfig from '../mixins/using-config';
+const componentName = 'picker';
+const name = `${prefix}-${componentName}`;
 
 const DEFAULT_KEYS = { value: 'value', label: 'label', icon: 'icon' };
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-confirm`,
-    `${prefix}-class-cancel`,
-    `${prefix}-class-title`,
-  ],
+export default {
   components: {
     TPopup,
   },
-  mixins: [
-    ParentMixin(RELATION_MAP.PickerItem),
-    useCustomNavbar,
-  ],
-  props: {
-    ...props,
-  },
-  emits: [
-    'visible-change',
-    'update:visible',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      defaultOverlayProps: {},
-      defaultPopUpzIndex: 11500,
-      indicatorTop: 72, // 默认indicator位置，会动态计算
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-confirm`,
+      `${prefix}-class-cancel`,
+      `${prefix}-class-title`,
+    ],
+    mixins: [
+      ParentMixin(RELATION_MAP.PickerItem),
+      useCustomNavbar,
+      usingConfig({ componentName }),
+    ],
+    props: {
+      ...props,
+    },
+    emits: [
+      'visible-change',
+      'update:visible',
+      'update:value',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        defaultOverlayProps: {},
+        defaultPopUpzIndex: 11500,
+        indicatorTop: 72, // 默认indicator位置，会动态计算
 
-      tools,
+        tools,
 
-      dataValue: coalesce(this.value, this.defaultValue),
-      dataVisible: this.visible,
-    };
-  },
-  watch: {
-    value: {
-      handler(value) {
-        this.dataValue = value;
-      },
-      immediate: true,
+        dataValue: coalesce(this.value, this.defaultValue),
+        dataVisible: this.visible,
+      };
     },
-    visible: {
-      handler(v) {
-        this.dataVisible = v;
+    watch: {
+      value: {
+        handler(value) {
+          this.dataValue = value;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    dataVisible: {
-      handler() {
-        this.onWatchVisible();
-        setTimeout(() => {
+      visible: {
+        handler(v) {
+          this.dataVisible = v;
+        },
+        immediate: true,
+      },
+      dataVisible: {
+        handler() {
           this.onWatchVisible();
-        });
+          setTimeout(() => {
+            this.onWatchVisible();
+          });
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    dataValue: {
-      handler() {
-        this.onWatchVisible();
+      dataValue: {
+        handler() {
+          this.onWatchVisible();
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    itemHeight: {
-      handler() {
-        this.updateIndicatorPosition();
+      itemHeight: {
+        handler() {
+          this.updateIndicatorPosition();
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-    visibleItemCount: {
-      handler() {
-        this.updateIndicatorPosition();
+      visibleItemCount: {
+        handler() {
+          this.updateIndicatorPosition();
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.children?.map((column, index) => (column.columnIndex = index));
-    this.updateIndicatorPosition();
-    setTimeout(() => {
-      this.updateChildren();
-    });
-  },
-  methods: {
-    coalesce,
-
-    innerAfterLinked() {
-      this.updateChildren();
+    mounted() {
+      this.children?.map((column, index) => (column.columnIndex = index));
+      this.updateIndicatorPosition();
+      setTimeout(() => {
+        this.updateChildren();
+      });
     },
+    methods: {
+      coalesce,
 
-    updateChildren() {
-      const { pickItemHeight } = this;
-      const { value, defaultValue, keys, visibleItemCount, itemHeight } = this;
+      innerAfterLinked() {
+        this.updateChildren();
+      },
 
-      this.children?.forEach((child, index) => {
-        child.value = coalesce(value?.[index], defaultValue?.[index], '');
-        child.columnIndex = index;
-        child.pickItemHeight = pickItemHeight;
-        child.itemHeight = itemHeight;
-        child.visibleItemCount = visibleItemCount;
-        child.keys = { ...DEFAULT_KEYS, ...(keys || {}) };
+      updateChildren() {
+        const { pickItemHeight } = this;
+        const { value, defaultValue, keys, visibleItemCount, itemHeight } = this;
 
-        child.update();
-      });
-    },
+        this.children?.forEach((child, index) => {
+          child.value = coalesce(value?.[index], defaultValue?.[index], '');
+          child.columnIndex = index;
+          child.pickItemHeight = pickItemHeight;
+          child.itemHeight = itemHeight;
+          child.visibleItemCount = visibleItemCount;
+          child.keys = { ...DEFAULT_KEYS, ...(keys || {}) };
 
-    getSelectedValue() {
-      const value = this.children?.map(item => item._selectedValue);
-      const label = this.children?.map(item => item._selectedLabel);
-      return [value, label];
-    },
+          child.update();
+        });
+      },
 
-    getColumnIndexes() {
-      const columns = this.children?.map((pickerColumn, columnIndex) => ({
-        column: columnIndex,
-        index: pickerColumn._selectedIndex,
-      }));
-      return columns;
-    },
+      getSelectedValue() {
+        const value = this.children?.map(item => item._selectedValue);
+        const label = this.children?.map(item => item._selectedLabel);
+        return [value, label];
+      },
 
-    onConfirm() {
-      const [value, label] = this.getSelectedValue();
-      const columns = this.getColumnIndexes();
+      getColumnIndexes() {
+        const columns = this.children?.map((pickerColumn, columnIndex) => ({
+          column: columnIndex,
+          index: pickerColumn._selectedIndex,
+        }));
+        return columns;
+      },
 
-      this.close('confirm-btn');
-      this.$emit('confirm', { value, label, columns });
+      onConfirm() {
+        const [value, label] = this.getSelectedValue();
+        const columns = this.getColumnIndexes();
 
-      if (JSON.stringify(this.dataValue) === JSON.stringify(value)) return;
-      this.$emit('change', { value, label, columns });
-    },
+        this.close('confirm-btn');
+        this.$emit('confirm', { value, label, columns });
 
-    triggerColumnChange({ column, index }) {
-      const [value, label] = this.getSelectedValue();
-      this.$emit('pick', { value, label, column, index });
-    },
+        if (JSON.stringify(this.dataValue) === JSON.stringify(value)) return;
+        this.$emit('change', { value, label, columns });
+        this.$emit('update:value', value);
+      },
 
-    onCancel() {
-      this.close('cancel-btn');
-      this.$emit('cancel');
-    },
+      triggerColumnChange({ column, index }) {
+        const [value, label] = this.getSelectedValue();
+        this.$emit('pick', { value, label, column, index });
+      },
 
-    onPopupChange(e) {
-      const { visible } = e;
+      onCancel() {
+        this.close('cancel-btn');
+        this.$emit('cancel');
+      },
 
-      this.close('overlay');
-      this.$emit('visible-change', { visible });
-      this.$emit('update:visible', visible);
-    },
+      onPopupChange(e) {
+        const { visible } = e;
 
-    close(trigger) {
-      if (this.autoClose) {
-        this.dataVisible = false;
-        this.$emit('update:visible', false);
-      }
-      this.$emit('close', { trigger });
-    },
+        this.close('overlay');
+        this.$emit('visible-change', { visible });
+        this.$emit('update:visible', visible);
+      },
 
-    updateIndicatorPosition() {
-      const { itemHeight, visibleItemCount } = this;
-      const indicatorTop = ((visibleItemCount - 1) / 2) * itemHeight;
-      this.indicatorTop = indicatorTop;
-    },
+      close(trigger) {
+        if (this.autoClose) {
+          this.dataVisible = false;
+          this.$emit('update:visible', false);
+        }
+        this.$emit('close', { trigger });
+      },
 
-    onWatchVisible() {
-      const {
-        usePopup,
-        dataVisible,
-      } = this;
-      if (!usePopup || dataVisible) {
-        this.updateChildren();
-        this.updateIndicatorPosition();
-      }
-    },
+      updateIndicatorPosition() {
+        const { itemHeight, visibleItemCount } = this;
+        const indicatorTop = ((visibleItemCount - 1) / 2) * itemHeight;
+        this.indicatorTop = indicatorTop;
+      },
+
+      onWatchVisible() {
+        const {
+          usePopup,
+          dataVisible,
+        } = this;
+        if (!usePopup || dataVisible) {
+          this.updateChildren();
+          this.updateIndicatorPosition();
+        }
+      },
 
-    isShowOverlay(value, defaultValue) {
-      return tools.isBoolean(value) ? value : defaultValue;
+      isShowOverlay(value, defaultValue) {
+        return tools.isBoolean(value) ? value : defaultValue;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./picker.css"></style>
 <style scoped>