chore: 增加 import 语句 (#1917)

* fix(popup): add import statement

* fix(form): add import statement

* fix(fixednav): add import statement

* fix(skeleton): add import statement

* fix(tabs): add import statement

* fix(tabs): remove multiple properties

src/packages/__VUE/fixednav/common.ts

@@ -1,71 +1,74 @@
 import { computed, PropType, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, translate } = createComponent('fixednav');
-export const component = {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    navList: {
-      default: () => [],
-      type: Array as PropType<any[]>
-    },
-    activeColor: {
-      default: '',
-      type: String
-    },
-    activeText: {
-      default: '',
-      type: String
-    },
-    unActiveText: {
-      default: '',
-      type: String
-    },
-    position: {
-      default: () => {
-        return {
-          top: 'auto',
-          bottom: 'auto'
-        };
+export const component = (components: any) => {
+  return {
+    components,
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      overlay: {
+        type: Boolean,
+        default: true
+      },
+      navList: {
+        default: () => [],
+        type: Array as PropType<any[]>
+      },
+      activeColor: {
+        default: '',
+        type: String
+      },
+      activeText: {
+        default: '',
+        type: String
       },
-      type: Object
+      unActiveText: {
+        default: '',
+        type: String
+      },
+      position: {
+        default: () => {
+          return {
+            top: 'auto',
+            bottom: 'auto'
+          };
+        },
+        type: Object
+      },
+      type: {
+        default: 'right',
+        type: String
+      }
     },
-    type: {
-      default: 'right',
-      type: String
-    }
-  },
-  emits: ['update:visible', 'selected'],
+    emits: ['update:visible', 'selected'],
 
-  setup(props: any, { emit }: any) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        active: props.visible,
-        [props.type]: true
-      };
-    });
+    setup(props: any, { emit }: any) {
+      const classes = computed(() => {
+        const prefixCls = componentName;
+        return {
+          [prefixCls]: true,
+          active: props.visible,
+          [props.type]: true
+        };
+      });
 
-    const current = ref(-1);
+      const current = ref(-1);
 
-    const updateValue = (value: boolean = !props.visible) => {
-      emit('update:visible', value);
-    };
-    const selected = (item: any, event: Event) => {
-      emit('selected', {
-        item,
-        event
-      });
-      current.value = item.id;
-    };
+      const updateValue = (value: boolean = !props.visible) => {
+        emit('update:visible', value);
+      };
+      const selected = (item: any, event: Event) => {
+        emit('selected', {
+          item,
+          event
+        });
+        current.value = item.id;
+      };
 
-    return { classes, updateValue, selected, translate, current };
-  }
-};
+      return { classes, updateValue, selected, translate, current };
+    }
+  };
+}

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

@@ -1,7 +1,10 @@
 <template src="./template.html"></template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('fixednav');
 import { component } from './common';
-export default create(component);
+import OverLay from '../overlay/index.taro.vue';
+const { create } = createComponent('fixednav');
+export default create(component({
+  [OverLay.name]: OverLay
+}));
 </script>

src/packages/__VUE/fixednav/index.vue

@@ -1,7 +1,10 @@
 <template src="./template.html"></template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('fixednav');
 import { component } from './common';
-export default create(component);
+import OverLay from '../overlay/index.vue';
+const { create } = createComponent('fixednav');
+export default create(component({
+  [OverLay.name]: OverLay
+}));
 </script>

src/packages/__VUE/form/common.ts

@@ -3,173 +3,175 @@ import { computed, PropType, provide, reactive, VNode, watch } from 'vue';
 import { FormItemRule } from '../formitem/types';
 import { ErrorMessage, FormRule, FormRules } from './types';
 
-export const component = {
-  props: {
-    modelValue: {
-      type: Object,
-      default: {}
+export const component = (components: any) => {
+  return {
+    props: {
+      modelValue: {
+        type: Object,
+        default: {}
+      },
+      rules: {
+        type: Object as PropType<import('./types').FormRules>,
+        default: {}
+      }
     },
-    rules: {
-      type: Object as PropType<import('./types').FormRules>,
-      default: {}
-    }
-  },
-  components: {},
-  emits: ['validate'],
-
-  setup(props: any, { emit, slots }: any) {
-    const formErrorTip = computed(() => reactive<any>({}));
-    provide('formErrorTip', formErrorTip);
-    const clearErrorTips = () => {
-      Object.keys(formErrorTip.value).forEach((item) => {
-        formErrorTip.value[item] = '';
-      });
-    };
+    components,
+    emits: ['validate'],
 
-    const reset = () => {
-      clearErrorTips();
-    };
+    setup(props: any, { emit, slots }: any) {
+      const formErrorTip = computed(() => reactive<any>({}));
+      provide('formErrorTip', formErrorTip);
+      const clearErrorTips = () => {
+        Object.keys(formErrorTip.value).forEach((item) => {
+          formErrorTip.value[item] = '';
+        });
+      };
 
-    watch(
-      () => props.modelValue,
-      () => {
+      const reset = () => {
         clearErrorTips();
-      },
-      { immediate: true }
-    );
+      };
 
-    const findFormItem = (vnodes: VNode[]) => {
-      let task: FormRule[] = [];
-      vnodes.forEach((vnode: VNode) => {
-        let type = vnode.type;
-        type = (type as any).name || type;
-        if (type == 'nut-form-item' || type?.toString().endsWith('form-item')) {
-          task.push({
-            prop: vnode.props?.['prop'],
-            rules: vnode.props?.['rules'] || []
-          });
-        } else if (Array.isArray(vnode.children) && vnode.children?.length) {
-          task = task.concat(findFormItem(vnode.children as VNode[]));
-        } else if (isObject(vnode.children) && Object.keys(vnode.children)) {
-          // 异步节点获取
-          if ((vnode.children as any)?.default) {
-            vnode.children = (vnode.children as any).default();
+      watch(
+        () => props.modelValue,
+        () => {
+          clearErrorTips();
+        },
+        { immediate: true }
+      );
+
+      const findFormItem = (vnodes: VNode[]) => {
+        let task: FormRule[] = [];
+        vnodes.forEach((vnode: VNode) => {
+          let type = vnode.type;
+          type = (type as any).name || type;
+          if (type == 'nut-form-item' || type?.toString().endsWith('form-item')) {
+            task.push({
+              prop: vnode.props?.['prop'],
+              rules: vnode.props?.['rules'] || []
+            });
+          } else if (Array.isArray(vnode.children) && vnode.children?.length) {
             task = task.concat(findFormItem(vnode.children as VNode[]));
+          } else if (isObject(vnode.children) && Object.keys(vnode.children)) {
+            // 异步节点获取
+            if ((vnode.children as any)?.default) {
+              vnode.children = (vnode.children as any).default();
+              task = task.concat(findFormItem(vnode.children as VNode[]));
+            }
           }
-        }
-      });
-      return task;
-    };
+        });
+        return task;
+      };
 
-    const tipMessage = (errorMsg: ErrorMessage) => {
-      if (errorMsg.message) {
-        emit('validate', errorMsg);
-      }
-      formErrorTip.value[errorMsg.prop] = errorMsg.message;
-    };
+      const tipMessage = (errorMsg: ErrorMessage) => {
+        if (errorMsg.message) {
+          emit('validate', errorMsg);
+        }
+        formErrorTip.value[errorMsg.prop] = errorMsg.message;
+      };
 
-    const checkRule = (item: FormRule): Promise<ErrorMessage | boolean> => {
-      const { rules, prop } = item;
+      const checkRule = (item: FormRule): Promise<ErrorMessage | boolean> => {
+        const { rules, prop } = item;
 
-      const _Promise = (errorMsg: ErrorMessage): Promise<ErrorMessage> => {
-        return new Promise((resolve, reject) => {
-          try {
-            tipMessage(errorMsg);
-            resolve(errorMsg);
-          } catch (error) {
-            reject(error);
-          }
-        });
-      };
+        const _Promise = (errorMsg: ErrorMessage): Promise<ErrorMessage> => {
+          return new Promise((resolve, reject) => {
+            try {
+              tipMessage(errorMsg);
+              resolve(errorMsg);
+            } catch (error) {
+              reject(error);
+            }
+          });
+        };
 
-      if (!prop) {
-        console.warn('[NutUI] <FormItem> 使用 rules 校验规则时 , 必须设置 prop 参数');
-      }
+        if (!prop) {
+          console.warn('[NutUI] <FormItem> 使用 rules 校验规则时 , 必须设置 prop 参数');
+        }
 
-      const value = getPropByPath(props.modelValue, prop || '');
+        const value = getPropByPath(props.modelValue, prop || '');
 
-      // clear tips
-      tipMessage({ prop, message: '' });
-      const formRules: FormRules = props.rules || {};
-      const _rules = [...(formRules?.[prop] || []), ...rules];
-      while (_rules.length) {
-        const rule = _rules.shift() as FormItemRule;
-        const { validator, ...ruleWithoutValidator } = rule;
-        const { required, regex, message } = ruleWithoutValidator;
-        const errorMsg = { prop, message };
-        if (required) {
-          if (!value) {
+        // clear tips
+        tipMessage({ prop, message: '' });
+        const formRules: FormRules = props.rules || {};
+        const _rules = [...(formRules?.[prop] || []), ...rules];
+        while (_rules.length) {
+          const rule = _rules.shift() as FormItemRule;
+          const { validator, ...ruleWithoutValidator } = rule;
+          const { required, regex, message } = ruleWithoutValidator;
+          const errorMsg = { prop, message };
+          if (required) {
+            if (!value) {
+              return _Promise(errorMsg);
+            }
+          }
+          if (regex && !regex.test(String(value))) {
             return _Promise(errorMsg);
           }
-        }
-        if (regex && !regex.test(String(value))) {
-          return _Promise(errorMsg);
-        }
-        if (validator) {
-          const result = validator(value, ruleWithoutValidator);
-          if (isPromise(result)) {
-            return new Promise((r, j) => {
-              result
-                .then((res) => {
-                  if (!res) {
-                    tipMessage(errorMsg);
-                    r(errorMsg);
-                  } else {
-                    r(true);
-                  }
-                })
-                .catch((e) => j(e));
-            });
-          } else {
-            if (!result) {
-              return _Promise(errorMsg);
+          if (validator) {
+            const result = validator(value, ruleWithoutValidator);
+            if (isPromise(result)) {
+              return new Promise((r, j) => {
+                result
+                  .then((res) => {
+                    if (!res) {
+                      tipMessage(errorMsg);
+                      r(errorMsg);
+                    } else {
+                      r(true);
+                    }
+                  })
+                  .catch((e) => j(e));
+              });
+            } else {
+              if (!result) {
+                return _Promise(errorMsg);
+              }
             }
           }
         }
-      }
-      return Promise.resolve(true);
-    };
+        return Promise.resolve(true);
+      };
 
-    /**
-     * 校验
-     * @param customProp 指定校验，用于用户自定义场景时触发，例如 blur、change 事件
-     * @returns
-     */
-    const validate = (customProp = '') => {
-      return new Promise((resolve, reject) => {
-        try {
-          const task = findFormItem(slots.default());
+      /**
+       * 校验
+       * @param customProp 指定校验，用于用户自定义场景时触发，例如 blur、change 事件
+       * @returns
+       */
+      const validate = (customProp = '') => {
+        return new Promise((resolve, reject) => {
+          try {
+            const task = findFormItem(slots.default());
 
-          const errors = task.map((item) => {
-            if (customProp) {
-              if (customProp == item.prop) {
-                return checkRule(item);
+            const errors = task.map((item) => {
+              if (customProp) {
+                if (customProp == item.prop) {
+                  return checkRule(item);
+                } else {
+                  return Promise.resolve(true);
+                }
               } else {
-                return Promise.resolve(true);
+                return checkRule(item);
               }
-            } else {
-              return checkRule(item);
-            }
-          });
+            });
 
-          Promise.all(errors).then((errorRes) => {
-            errorRes = errorRes.filter((item) => item != true);
-            const res = { valid: true, errors: [] };
-            if (errorRes.length) {
-              res.valid = false;
-              res.errors = errorRes as any;
-            }
-            resolve(res);
-          });
-        } catch (error) {
-          reject(error);
-        }
-      });
-    };
-    const submit = () => {
-      validate();
-      return false;
-    };
-    return { validate, reset, submit, formErrorTip };
+            Promise.all(errors).then((errorRes) => {
+              errorRes = errorRes.filter((item) => item != true);
+              const res = { valid: true, errors: [] };
+              if (errorRes.length) {
+                res.valid = false;
+                res.errors = errorRes as any;
+              }
+              resolve(res);
+            });
+          } catch (error) {
+            reject(error);
+          }
+        });
+      };
+      const submit = () => {
+        validate();
+        return false;
+      };
+      return { validate, reset, submit, formErrorTip };
+    }
   }
 };

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

@@ -7,7 +7,10 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('form');
 import { component } from './common';
-export default create(component);
+import CellGroup from '../cellgroup/index.vue';
+const { create } = createComponent('form');
+export default create(component({
+  [CellGroup.name]: CellGroup
+}));
 </script>

src/packages/__VUE/form/index.vue

@@ -7,7 +7,10 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('form');
 import { component } from './common';
-export default create(component);
+import CellGroup from '../cellgroup/index.vue';
+const { create } = createComponent('form');
+export default create(component({
+  [CellGroup.name]: CellGroup
+}));
 </script>

src/packages/__VUE/popup/common.ts

@@ -5,9 +5,9 @@ import { popupProps } from './props';
 const initIndex = 2000;
 let _zIndex = initIndex;
 
-export const component = (componentName: string) => {
+export const component = (componentName: string, components: any) => {
   return {
-    components: {},
+    components,
     props: {
       ...popupProps
     },

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

@@ -28,7 +28,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import OverLay from '../overlay/index.taro.vue';
 const { componentName, create } = createComponent('popup');
-
-export default create(component(componentName));
+export default create(component(componentName, {
+  [OverLay.name]: OverLay
+}));
 </script>

src/packages/__VUE/popup/index.vue

@@ -28,6 +28,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import OverLay from '../overlay/index.vue';
 const { componentName, create } = createComponent('popup');
-export default create(component(componentName));
+export default create(component(componentName, {
+  [OverLay.name]: OverLay
+}));
 </script>

src/packages/__VUE/skeleton/common.ts

@@ -1,103 +1,106 @@
 import { onMounted, computed, toRefs } from 'vue';
 export type avatarShape = 'round' | 'square';
 
-export const component = {
-  props: {
-    //每行宽度
-    width: {
-      type: String,
-      default: '100px'
-    },
-    //每行高度
-    height: {
-      type: String,
-      default: '100px'
-    },
-    //是否显示动画
-    animated: {
-      type: Boolean,
-      default: false
-    },
-    //头像
-    avatar: {
-      type: Boolean,
-      default: false
-    },
-    //头像形状：正方形/圆形
-    avatarShape: {
-      type: String as import('vue').PropType<avatarShape>,
-      default: 'round'
-    },
-    //头像大小
-    avatarSize: {
-      type: String,
-      default: '50px'
-    },
-    //是否显示骨架屏
-    loading: {
-      type: Boolean,
-      default: true
-    },
-    //标题/段落 圆角风格
-    round: {
-      type: Boolean,
-      default: false
-    },
+export const component = (components: any) => {
+  return {
+    components,
+    props: {
+      //每行宽度
+      width: {
+        type: String,
+        default: '100px'
+      },
+      //每行高度
+      height: {
+        type: String,
+        default: '100px'
+      },
+      //是否显示动画
+      animated: {
+        type: Boolean,
+        default: false
+      },
+      //头像
+      avatar: {
+        type: Boolean,
+        default: false
+      },
+      //头像形状：正方形/圆形
+      avatarShape: {
+        type: String as import('vue').PropType<avatarShape>,
+        default: 'round'
+      },
+      //头像大小
+      avatarSize: {
+        type: String,
+        default: '50px'
+      },
+      //是否显示骨架屏
+      loading: {
+        type: Boolean,
+        default: true
+      },
+      //标题/段落 圆角风格
+      round: {
+        type: Boolean,
+        default: false
+      },
 
-    //显示段落行数
-    row: {
-      type: String,
-      default: '1'
-    },
+      //显示段落行数
+      row: {
+        type: String,
+        default: '1'
+      },
 
-    //是否显示段落标题
-    title: {
-      type: Boolean,
-      default: true
-    }
-  },
+      //是否显示段落标题
+      title: {
+        type: Boolean,
+        default: true
+      }
+    },
 
-  setup(props: any) {
-    const { avatarShape, round, avatarSize } = toRefs(props);
+    setup(props: any) {
+      const { avatarShape, round, avatarSize } = toRefs(props);
 
-    const avatarClass = computed(() => {
-      const prefixCls = 'avatarClass';
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--${avatarShape.value}`]: avatarShape.value
-      };
-    });
+      const avatarClass = computed(() => {
+        const prefixCls = 'avatarClass';
+        return {
+          [prefixCls]: true,
+          [`${prefixCls}--${avatarShape.value}`]: avatarShape.value
+        };
+      });
 
-    const getBlockClass = (prefixCls: string) => {
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--round`]: round.value
+      const getBlockClass = (prefixCls: string) => {
+        return {
+          [prefixCls]: true,
+          [`${prefixCls}--round`]: round.value
+        };
       };
-    };
 
-    const getStyle = (): import('vue').CSSProperties => {
-      const style: import('vue').CSSProperties = {};
-      if (avatarSize.value) {
+      const getStyle = (): import('vue').CSSProperties => {
+        const style: import('vue').CSSProperties = {};
+        if (avatarSize.value) {
+          return {
+            width: avatarSize.value,
+            height: avatarSize.value
+          };
+        }
         return {
-          width: avatarSize.value,
-          height: avatarSize.value
+          width: '50px',
+          height: '50px'
         };
-      }
-      return {
-        width: '50px',
-        height: '50px'
       };
-    };
 
-    onMounted(() => {
-      // console.log('row', props.row);
-    });
+      onMounted(() => {
+        // console.log('row', props.row);
+      });
 
-    return {
-      avatarShape,
-      avatarClass,
-      getBlockClass,
-      getStyle
-    };
-  }
-};
+      return {
+        avatarShape,
+        avatarClass,
+        getBlockClass,
+        getStyle
+      };
+    }
+  };
+}

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

@@ -18,6 +18,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import Avatar from '../avatar/index.taro.vue';
 const { create } = createComponent('skeleton');
-export default create(component);
+export default create(component({
+  [Avatar.name]: Avatar
+}));
 </script>

src/packages/__VUE/skeleton/index.vue

@@ -18,6 +18,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import Avatar from '../avatar/index.vue';
 const { create } = createComponent('skeleton');
-export default create(component);
+export default create(component({
+  [Avatar.name]: Avatar
+}));
 </script>

src/packages/__VUE/tabs/common.ts

@@ -10,194 +10,196 @@ export class Title {
   constructor() {}
 }
 export type TabsSize = 'large' | 'normal' | 'small';
-export const component = {
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: 0
-    },
-    color: {
-      type: String,
-      default: ''
-    },
-    direction: {
-      type: String,
-      default: 'horizontal' //vertical
-    },
-    size: {
-      type: String as import('vue').PropType<TabsSize>,
-      default: 'normal'
-    },
-    type: {
-      type: String,
-      default: 'line' //card、line、smile
-    },
-    titleScroll: {
-      type: Boolean,
-      default: false
-    },
-    ellipsis: {
-      type: Boolean,
-      default: true
-    },
-    autoHeight: {
-      type: Boolean,
-      default: false
-    },
-    background: {
-      type: String,
-      default: ''
-    },
-    animatedTime: {
-      type: [Number, String],
-      default: 300
-    },
-    titleGutter: {
-      type: [Number, String],
-      default: 0
-    },
-    sticky: {
-      type: Boolean,
-      default: false
+export const component = (components: any) => {
+  return {
+    props: {
+      modelValue: {
+        type: [String, Number],
+        default: 0
+      },
+      color: {
+        type: String,
+        default: ''
+      },
+      direction: {
+        type: String,
+        default: 'horizontal' //vertical
+      },
+      size: {
+        type: String as import('vue').PropType<TabsSize>,
+        default: 'normal'
+      },
+      type: {
+        type: String,
+        default: 'line' //card、line、smile
+      },
+      titleScroll: {
+        type: Boolean,
+        default: false
+      },
+      ellipsis: {
+        type: Boolean,
+        default: true
+      },
+      autoHeight: {
+        type: Boolean,
+        default: false
+      },
+      background: {
+        type: String,
+        default: ''
+      },
+      animatedTime: {
+        type: [Number, String],
+        default: 300
+      },
+      titleGutter: {
+        type: [Number, String],
+        default: 0
+      },
+      sticky: {
+        type: Boolean,
+        default: false
+      },
+      top: {
+        type: Number,
+        default: 0
+      }
     },
-    top: {
-      type: Number,
-      default: 0
-    }
-  },
 
-  components: {},
-  emits: ['update:modelValue', 'click', 'change'],
+    components,
+    emits: ['update:modelValue', 'click', 'change'],
 
-  setup(props: any, { emit, slots }: any) {
-    const container = ref(null);
-    let stickyFixed: boolean;
-    provide('activeKey', { activeKey: computed(() => props.modelValue) });
-    provide('autoHeight', { autoHeight: computed(() => props.autoHeight) });
-    const titles: Ref<Title[]> = ref([]);
-    const renderTitles = (vnodes: VNode[]) => {
-      vnodes.forEach((vnode: VNode, index: number) => {
-        let type = vnode.type;
-        type = (type as any).name || type;
-        if (type == 'nut-tabpane') {
-          let title = new Title();
-          if (vnode.props?.title || vnode.props?.['pane-key'] || vnode.props?.['paneKey']) {
-            let paneKeyType = TypeOfFun(vnode.props?.['pane-key']);
-            let paneIndex =
-              paneKeyType == 'number' || paneKeyType == 'string' ? String(vnode.props?.['pane-key']) : null;
-            let camelPaneKeyType = TypeOfFun(vnode.props?.['paneKey']);
-            let camelPaneIndex =
-              camelPaneKeyType == 'number' || camelPaneKeyType == 'string' ? String(vnode.props?.['paneKey']) : null;
-            title.title = vnode.props?.title;
-            title.paneKey = paneIndex || camelPaneIndex || String(index);
-            title.disabled = vnode.props?.disabled;
+    setup(props: any, { emit, slots }: any) {
+      const container = ref(null);
+      let stickyFixed: boolean;
+      provide('activeKey', { activeKey: computed(() => props.modelValue) });
+      provide('autoHeight', { autoHeight: computed(() => props.autoHeight) });
+      const titles: Ref<Title[]> = ref([]);
+      const renderTitles = (vnodes: VNode[]) => {
+        vnodes.forEach((vnode: VNode, index: number) => {
+          let type = vnode.type;
+          type = (type as any).name || type;
+          if (type == 'nut-tabpane') {
+            let title = new Title();
+            if (vnode.props?.title || vnode.props?.['pane-key'] || vnode.props?.['paneKey']) {
+              let paneKeyType = TypeOfFun(vnode.props?.['pane-key']);
+              let paneIndex =
+                paneKeyType == 'number' || paneKeyType == 'string' ? String(vnode.props?.['pane-key']) : null;
+              let camelPaneKeyType = TypeOfFun(vnode.props?.['paneKey']);
+              let camelPaneIndex =
+                camelPaneKeyType == 'number' || camelPaneKeyType == 'string' ? String(vnode.props?.['paneKey']) : null;
+              title.title = vnode.props?.title;
+              title.paneKey = paneIndex || camelPaneIndex || String(index);
+              title.disabled = vnode.props?.disabled;
+            } else {
+              // title.titleSlot = vnode.children?.title() as VNode[];
+            }
+            titles.value.push(title);
           } else {
-            // title.titleSlot = vnode.children?.title() as VNode[];
+            if (vnode.children == ' ') {
+              return;
+            }
+            renderTitles(vnode.children as VNode[]);
           }
-          titles.value.push(title);
+        });
+      };
+
+      const currentIndex = ref((props.modelValue as number) || 0);
+      const findTabsIndex = (value: string | number) => {
+        let index = titles.value.findIndex((item) => item.paneKey == value);
+        if (titles.value.length == 0) {
+          console.error('[NutUI] <Tabs> 当前未找到 TabPane 组件元素 , 请检查 .');
+        } else if (index == -1) {
+          console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置，请采用下标控制 .');
         } else {
-          if (vnode.children == ' ') {
-            return;
-          }
-          renderTitles(vnode.children as VNode[]);
+          currentIndex.value = index;
         }
-      });
-    };
-
-    const currentIndex = ref((props.modelValue as number) || 0);
-    const findTabsIndex = (value: string | number) => {
-      let index = titles.value.findIndex((item) => item.paneKey == value);
-      if (titles.value.length == 0) {
-        console.error('[NutUI] <Tabs> 当前未找到 TabPane 组件元素 , 请检查 .');
-      } else if (index == -1) {
-        console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置，请采用下标控制 .');
-      } else {
-        currentIndex.value = index;
-      }
-    };
-    const init = (vnodes: VNode[] = slots.default?.()) => {
-      titles.value = [];
-      vnodes = vnodes?.filter((item) => typeof item.children !== 'string');
-      if (vnodes && vnodes.length) {
-        renderTitles(vnodes);
-      }
-      findTabsIndex(props.modelValue);
-    };
-    const onStickyScroll = (params: { top: number; fixed: boolean }) => {
-      stickyFixed = params.fixed;
-    };
-
-    watch(
-      () => slots.default?.(),
-      (vnodes: VNode[]) => {
-        init(vnodes);
-      }
-    );
-    const getScrollTopRoot = () => {
-      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    };
-    watch(
-      () => props.modelValue,
-      (value: string | number) => {
-        findTabsIndex(value);
-        if (stickyFixed) {
-          let top = useRect(container.value!).top + getScrollTopRoot();
-          let value = Math.ceil(top - props.top);
-          window.scrollTo({
-            top: value,
-            behavior: 'smooth'
-          });
+      };
+      const init = (vnodes: VNode[] = slots.default?.()) => {
+        titles.value = [];
+        vnodes = vnodes?.filter((item) => typeof item.children !== 'string');
+        if (vnodes && vnodes.length) {
+          renderTitles(vnodes);
         }
-      }
-    );
-    onMounted(init);
-    onActivated(init);
-    const contentStyle = computed(() => {
-      return {
-        transform:
-          props.direction == 'horizontal'
-            ? `translate3d(-${currentIndex.value * 100}%, 0, 0)`
-            : `translate3d( 0,-${currentIndex.value * 100}%, 0)`,
-        transitionDuration: `${props.animatedTime}ms`
+        findTabsIndex(props.modelValue);
       };
-    });
-    const tabsNavStyle = computed(() => {
-      return {
-        background: props.background
+      const onStickyScroll = (params: { top: number; fixed: boolean }) => {
+        stickyFixed = params.fixed;
       };
-    });
-    const tabsActiveStyle = computed(() => {
-      return {
-        color: props.type == 'smile' ? props.color : '',
-        background: props.type == 'line' ? props.color : ''
+
+      watch(
+        () => slots.default?.(),
+        (vnodes: VNode[]) => {
+          init(vnodes);
+        }
+      );
+      const getScrollTopRoot = () => {
+        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      };
+      watch(
+        () => props.modelValue,
+        (value: string | number) => {
+          findTabsIndex(value);
+          if (stickyFixed) {
+            let top = useRect(container.value!).top + getScrollTopRoot();
+            let value = Math.ceil(top - props.top);
+            window.scrollTo({
+              top: value,
+              behavior: 'smooth'
+            });
+          }
+        }
+      );
+      onMounted(init);
+      onActivated(init);
+      const contentStyle = computed(() => {
+        return {
+          transform:
+            props.direction == 'horizontal'
+              ? `translate3d(-${currentIndex.value * 100}%, 0, 0)`
+              : `translate3d( 0,-${currentIndex.value * 100}%, 0)`,
+          transitionDuration: `${props.animatedTime}ms`
+        };
+      });
+      const tabsNavStyle = computed(() => {
+        return {
+          background: props.background
+        };
+      });
+      const tabsActiveStyle = computed(() => {
+        return {
+          color: props.type == 'smile' ? props.color : '',
+          background: props.type == 'line' ? props.color : ''
+        };
+      });
+      const titleStyle = computed(() => {
+        return {
+          marginLeft: pxCheck(props.titleGutter),
+          marginRight: pxCheck(props.titleGutter)
+        };
+      });
+      const methods = {
+        tabChange: (item: Title, index: number) => {
+          emit('click', item);
+          if (item.disabled) {
+            return;
+          }
+          currentIndex.value = index;
+          emit('update:modelValue', item.paneKey);
+          emit('change', item);
+        }
       };
-    });
-    const titleStyle = computed(() => {
       return {
-        marginLeft: pxCheck(props.titleGutter),
-        marginRight: pxCheck(props.titleGutter)
+        titles,
+        contentStyle,
+        tabsNavStyle,
+        titleStyle,
+        tabsActiveStyle,
+        container,
+        onStickyScroll,
+        ...methods
       };
-    });
-    const methods = {
-      tabChange: (item: Title, index: number) => {
-        emit('click', item);
-        if (item.disabled) {
-          return;
-        }
-        currentIndex.value = index;
-        emit('update:modelValue', item.paneKey);
-        emit('change', item);
-      }
-    };
-    return {
-      titles,
-      contentStyle,
-      tabsNavStyle,
-      titleStyle,
-      tabsActiveStyle,
-      container,
-      onStickyScroll,
-      ...methods
-    };
-  }
+    }
+  };
 };

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

@@ -2,6 +2,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import Sticky from '../sticky/index.taro.vue';
 const { create } = createComponent('tabs');
-export default create(component);
+export default create(component({
+  [Sticky.name]: Sticky
+}));
 </script>

src/packages/__VUE/tabs/index.vue

@@ -2,6 +2,9 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { component } from './common';
+import Sticky from '../sticky/index.vue';
 const { create } = createComponent('tabs');
-export default create(component);
+export default create(component({
+  [Sticky.name]: Sticky
+}));
 </script>