uview-pro 0.0.7 → 0.0.8

package/components/u-swiper/u-swiper.vue

@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { SwiperProps } from './types';
 
 defineOptions({ name: 'u-swiper' });
 /**
@@ -81,47 +82,7 @@ defineOptions({ name: 'u-swiper' });
  * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
  */
 
-// props 定义，保留参数注释
-const props = defineProps({
-    /** 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选 */
-    list: { type: Array as () => Array<Record<string, any>>, default: () => [] },
-    /** 是否显示title标题 */
-    title: { type: Boolean, default: false },
-    /** 用户自定义的指示器的样式 */
-    indicator: { type: Object, default: () => ({}) },
-    /** 圆角值 */
-    borderRadius: { type: [Number, String], default: 8 },
-    /** 隔多久自动切换 */
-    interval: { type: [String, Number], default: 3000 },
-    /** 指示器的模式，rect|dot|number|round */
-    mode: { type: String, default: 'round' },
-    /** list的高度，单位rpx */
-    height: { type: [Number, String], default: 250 },
-    /** 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight */
-    indicatorPos: { type: String, default: 'bottomCenter' },
-    /** 是否开启缩放效果 */
-    effect3d: { type: Boolean, default: false },
-    /** 3D模式的情况下，激活item与前后item之间的距离，单位rpx */
-    effect3dPreviousMargin: { type: [Number, String], default: 50 },
-    /** 是否自动播放 */
-    autoplay: { type: Boolean, default: true },
-    /** 自动轮播时间间隔，单位ms */
-    duration: { type: [Number, String], default: 500 },
-    /** 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张 */
-    circular: { type: Boolean, default: true },
-    /** 图片的裁剪模式 */
-    imgMode: { type: String, default: 'aspectFill' },
-    /** 从list数组中读取的图片的属性名 */
-    name: { type: String, default: 'image' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '#f3f4f6' },
-    /** 初始化时，默认显示第几项 */
-    current: { type: [Number, String], default: 0 },
-    /** 标题的样式，对象形式 */
-    titleStyle: { type: Object, default: () => ({}) }
-});
-
-// emits 定义
+const props = defineProps(SwiperProps);
 const emit = defineEmits(['click', 'change']);
 
 // 当前活跃的swiper-item的index

package/components/u-switch/types.ts

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * SwitchProps 开关选择器 props 类型定义
+ * @description 选择开关，支持自定义颜色、尺寸、值等
+ */
+export const SwitchProps = {
+    /** 是否显示加载中状态 */
+    loading: { type: Boolean, default: false },
+    /** 是否禁用 */
+    disabled: { type: Boolean, default: false },
+    /** 开关尺寸，单位rpx */
+    size: { type: [Number, String] as PropType<number | string>, default: 50 },
+    /** 打开时的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 关闭时的颜色 */
+    inactiveColor: { type: String, default: '#ffffff' },
+    /** v-model 绑定值，是否选中 */
+    modelValue: { type: Boolean, default: false },
+    /** 是否开启轻微震动反馈 */
+    vibrateShort: { type: Boolean, default: false },
+    /** 打开时的值 */
+    activeValue: { type: [Number, String, Boolean] as PropType<number | string | boolean>, default: true },
+    /** 关闭时的值 */
+    inactiveValue: { type: [Number, String, Boolean] as PropType<number | string | boolean>, default: false }
+};
+
+export type SwitchProps = ExtractPropTypes<typeof SwitchProps>;

package/components/u-switch/u-switch.vue

@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import { computed, nextTick } from 'vue';
 import { $u } from '../..';
+import { SwitchProps } from './types';
 
 defineOptions({
     name: 'u-switch'
@@ -34,26 +35,7 @@ defineOptions({
  * @event {Function} change 在switch打开或关闭时触发
  * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
  */
-const props = defineProps({
-    /** 是否为加载中状态 */
-    loading: { type: Boolean, default: false },
-    /** 是否为禁用状态 */
-    disabled: { type: Boolean, default: false },
-    /** 开关尺寸，单位rpx */
-    size: { type: [Number, String], default: 50 },
-    /** 打开时的背景颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 关闭时的背景颜色 */
-    inactiveColor: { type: String, default: '#ffffff' },
-    /** 通过v-model双向绑定的值 */
-    modelValue: { type: Boolean, default: false },
-    /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
-    vibrateShort: { type: Boolean, default: false },
-    /** 打开选择器时的值 */
-    activeValue: { type: [Number, String, Boolean], default: true },
-    /** 关闭选择器时的值 */
-    inactiveValue: { type: [Number, String, Boolean], default: false }
-});
+const props = defineProps(SwitchProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
 

package/components/u-tabbar/types.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TabbarProps 底部导航栏 props 类型定义
+ * @description 底部导航栏，支持凸起按钮、徽标、切换前回调等
+ */
+export const TabbarProps = {
+    /** 是否显示tabbar */
+    show: { type: Boolean, default: true },
+    /** v-model绑定当前激活项的值 */
+    modelValue: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** tabbar背景色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** tabbar高度，单位任意，数值默认rpx */
+    height: { type: [String, Number] as PropType<string | number>, default: '50px' },
+    /** 非凸起图标的大小，单位任意，数值默认rpx */
+    iconSize: { type: [String, Number] as PropType<string | number>, default: 40 },
+    /** 凸起图标的大小，单位任意，数值默认rpx */
+    midButtonSize: { type: [String, Number] as PropType<string | number>, default: 90 },
+    /** 激活时的颜色 */
+    activeColor: { type: String, default: '#303133' },
+    /** 未激活时的颜色 */
+    inactiveColor: { type: String, default: '#606266' },
+    /** 是否显示中部凸起按钮 */
+    midButton: { type: Boolean, default: false },
+    /** tabbar配置项数组 */
+    list: { type: Array as PropType<any[]>, default: () => [] },
+    /** 切换前回调，返回true或Promise */
+    beforeSwitch: { type: Function as PropType<((index: number) => boolean | Promise<any>) | null>, default: null },
+    /** 是否显示顶部横线 */
+    borderTop: { type: Boolean, default: true },
+    /** 是否隐藏原生tabbar */
+    hideTabBar: { type: Boolean, default: true }
+};
+
+export type TabbarProps = ExtractPropTypes<typeof TabbarProps>;

package/components/u-tabbar/u-tabbar.vue

@@ -43,6 +43,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { TabbarProps } from './types';
 
 defineOptions({ name: 'u-tabbar' });
 
@@ -63,73 +64,7 @@ defineOptions({ name: 'u-tabbar' });
  * @property {Boolean} hideTabBar 是否隐藏原生tabbar
  */
 
-const props = defineProps({
-    /** 显示与否 */
-    show: {
-        type: Boolean,
-        default: true
-    },
-    /** 通过v-model绑定current值 */
-    modelValue: {
-        type: [String, Number],
-        default: 0
-    },
-    /** 整个tabbar的背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** tabbar的高度，默认50px，单位任意，如果为数值，则为rpx单位 */
-    height: {
-        type: [String, Number],
-        default: '50px'
-    },
-    /** 非凸起图标的大小，单位任意，数值默认rpx */
-    iconSize: {
-        type: [String, Number],
-        default: 40
-    },
-    /** 凸起的图标的大小，单位任意，数值默认rpx */
-    midButtonSize: {
-        type: [String, Number],
-        default: 90
-    },
-    /** 激活时的演示，包括字体图标，提示文字等的演示 */
-    activeColor: {
-        type: String,
-        default: '#303133'
-    },
-    /** 未激活时的颜色 */
-    inactiveColor: {
-        type: String,
-        default: '#606266'
-    },
-    /** 是否显示中部的凸起按钮 */
-    midButton: {
-        type: Boolean,
-        default: false
-    },
-    /** 配置参数 */
-    list: {
-        type: Array as () => any[],
-        default: () => []
-    },
-    /** 切换前的回调 */
-    beforeSwitch: {
-        type: Function,
-        default: null
-    },
-    /** 是否显示顶部的横线 */
-    borderTop: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否隐藏原生tabbar */
-    hideTabBar: {
-        type: Boolean,
-        default: true
-    }
-});
+const props = defineProps(TabbarProps);
 
 const emit = defineEmits<{ (e: 'change', index: number): void; (e: 'update:modelValue', index: number): void }>();
 
@@ -194,20 +129,16 @@ const elColor = computed<(index: number) => string>(() => {
 async function clickHandler(index: number) {
     if (props.beforeSwitch && typeof props.beforeSwitch === 'function') {
         // 执行回调，同时传入索引当作参数
-        // 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
-        // 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
-        // let beforeSwitch = props.beforeSwitch.bind($u.$parent.call(getCurrentInstance()?.proxy))(index);
-        // 或许有问题
-        let beforeSwitch = props.beforeSwitch(index);
+        let beforeSwitchResult = props.beforeSwitch(index);
         // 判断是否返回了promise
-        if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
-            await beforeSwitch
+        if (typeof beforeSwitchResult === 'object' && beforeSwitchResult !== null && typeof beforeSwitchResult.then === 'function') {
+            await beforeSwitchResult
                 .then(() => {
                     // promise返回成功，
                     switchTab(index);
                 })
                 .catch(() => {});
-        } else if (beforeSwitch === true) {
+        } else if (beforeSwitchResult === true) {
             // 如果返回true
             switchTab(index);
         }

package/components/u-table/types.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TextAlign } from '../../types/global';
+
+/**
+ * TableProps 表格 props 类型定义
+ * @description 表格组件，支持自定义边框、背景、对齐方式等
+ */
+export const TableProps = {
+    /** 表格边框的颜色 */
+    borderColor: { type: String, default: '#e4e7ed' },
+    /** 单元格的内容对齐方式，作用类似css的text-align */
+    align: { type: String as PropType<TextAlign>, default: 'center' },
+    /** 单元格的内边距，同css的padding写法 */
+    padding: { type: String, default: '10rpx 6rpx' },
+    /** 单元格字体大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
+    /** 单元格字体颜色 */
+    color: { type: String, default: '#606266' },
+    /** th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） */
+    thStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 表格的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' }
+};
+
+export type TableProps = ExtractPropTypes<typeof TableProps>;

package/components/u-table/u-table.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { TableProps } from './types';
 
 defineOptions({ name: 'u-table' });
 
@@ -25,57 +26,7 @@ defineOptions({ name: 'u-table' });
  * @example <u-table></u-table>
  */
 
-const props = defineProps({
-    /**
-     * 表格边框的颜色
-     */
-    borderColor: {
-        type: String,
-        default: '#e4e7ed'
-    },
-    /**
-     * 单元格的内容对齐方式
-     */
-    align: {
-        type: String,
-        default: 'center'
-    },
-    /**
-     * td的内边距
-     */
-    padding: {
-        type: String,
-        default: '10rpx 6rpx'
-    },
-    /**
-     * 字体大小
-     */
-    fontSize: {
-        type: [String, Number],
-        default: 28
-    },
-    /**
-     * 字体颜色
-     */
-    color: {
-        type: String,
-        default: '#606266'
-    },
-    /**
-     * th的自定义样式
-     */
-    thStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({})
-    },
-    /**
-     * table的背景颜色
-     */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    }
-});
+const props = defineProps(TableProps);
 
 /**
  * 计算表格样式

package/components/u-tabs/types.ts

@@ -0,0 +1,51 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TabsItem } from '../../types/global';
+
+/**
+ * TabsProps tabs标签 props 类型定义
+ * @description 标签组件，支持横向滚动、滑块、徽标等
+ */
+export const TabsProps = {
+    /** tabs是否可以左右拖动 */
+    isScroll: { type: Boolean, default: true },
+    /** 标签数组 */
+    list: { type: Array as PropType<Array<TabsItem>>, default: () => [] },
+    /** 当前活动tab的索引 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 导航栏的高度和行高 */
+    height: { type: [String, Number] as PropType<number | string>, default: 80 },
+    /** 字体大小 */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 30 },
+    /** 过渡动画时长, 单位s */
+    duration: { type: [String, Number] as PropType<number | string>, default: 0.5 },
+    /** 选中项的主题颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 未选中项的颜色 */
+    inactiveColor: { type: String, default: '#303133' },
+    /** 菜单底部移动的bar的宽度，单位rpx */
+    barWidth: { type: [String, Number] as PropType<number | string>, default: 40 },
+    /** 移动bar的高度 */
+    barHeight: { type: [String, Number] as PropType<number | string>, default: 6 },
+    /** 单个tab的左右内边距之和，单位rpx */
+    gutter: { type: [String, Number] as PropType<number | string>, default: 30 },
+    /** 导航栏的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 读取传入的数组对象的属性(tab名称) */
+    name: { type: String, default: 'name' },
+    /** 读取传入的数组对象的属性(徽标数) */
+    count: { type: String, default: 'count' },
+    /** 徽标数位置偏移 */
+    offset: { type: Array as unknown as PropType<[number, number]>, default: () => [5, 20] },
+    /** 活动tab字体是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** 当前活动tab item的样式 */
+    activeItemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示底部的滑块 */
+    showBar: { type: Boolean, default: true },
+    /** 底部滑块的自定义样式 */
+    barStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 标签的宽度 */
+    itemWidth: { type: [String, Number] as PropType<number | string>, default: 'auto' }
+};
+
+export type TabsProps = ExtractPropTypes<typeof TabsProps>;

package/components/u-tabs/u-tabs.vue

@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { TabsProps } from './types';
 
 defineOptions({ name: 'u-tabs' });
 
@@ -49,51 +50,12 @@ defineOptions({ name: 'u-tabs' });
  * @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
  */
 
-// props 定义，保留参数注释
-const props = defineProps({
-    /** tabs是否可以左右拖动 */
-    isScroll: { type: Boolean, default: true },
-    /** 标签数组 */
-    list: { type: Array as () => Array<Record<string, any>>, default: () => [] },
-    /** 当前活动tab的索引 */
-    current: { type: [Number, String], default: 0 },
-    /** 导航栏的高度和行高 */
-    height: { type: [String, Number], default: 80 },
-    /** 字体大小 */
-    fontSize: { type: [String, Number], default: 30 },
-    /** 过渡动画时长, 单位s */
-    duration: { type: [String, Number], default: 0.5 },
-    /** 选中项的主题颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 未选中项的颜色 */
-    inactiveColor: { type: String, default: '#303133' },
-    /** 菜单底部移动的bar的宽度，单位rpx */
-    barWidth: { type: [String, Number], default: 40 },
-    /** 移动bar的高度 */
-    barHeight: { type: [String, Number], default: 6 },
-    /** 单个tab的左右内边距之和，单位rpx */
-    gutter: { type: [String, Number], default: 30 },
-    /** 导航栏的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 读取传入的数组对象的属性(tab名称) */
-    name: { type: String, default: 'name' },
-    /** 读取传入的数组对象的属性(徽标数) */
-    count: { type: String, default: 'count' },
-    /** 徽标数位置偏移 */
-    offset: { type: Array, default: () => [5, 20] },
-    /** 活动tab字体是否加粗 */
-    bold: { type: Boolean, default: true },
-    /** 当前活动tab item的样式 */
-    activeItemStyle: { type: Object, default: () => ({}) },
-    /** 是否显示底部的滑块 */
-    showBar: { type: Boolean, default: true },
-    /** 底部滑块的自定义样式 */
-    barStyle: { type: Object, default: () => ({}) },
-    /** 标签的宽度 */
-    itemWidth: { type: [Number, String], default: 'auto' }
-});
+// props 定义
+const props = defineProps(TabsProps);
 
-// emits 定义
+/**
+ * emits 定义
+ */
 const emit = defineEmits(['change']);
 const instance = getCurrentInstance();
 // 滚动scroll-view的左边滚动距离

package/components/u-tabs-swiper/types.ts

@@ -0,0 +1,53 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TabsSwiperAutoCenterMode, TabsSwiperListItem } from '../../types/global';
+
+/**
+ * TabsSwiperProps 全屏选项卡 props 类型定义
+ * @description 全屏选项卡，支持滑块、渐变色、滚动居中等
+ */
+export const TabsSwiperProps = {
+    /** tabs是否可以左右拖动 */
+    isScroll: { type: Boolean, default: true },
+    /** 标签数组，元素为对象，如[{name: '推荐'}] */
+    list: { type: Array as PropType<Array<TabsSwiperListItem>>, default: () => [] },
+    /** 指定哪个tab为激活状态 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 导航栏的高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** tab文字大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** tabs组件外部swiper的宽度，单位rpx */
+    swiperWidth: { type: [String, Number] as PropType<number | string>, default: 750 },
+    /** 滑块和激活tab文字的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** tabs文字颜色 */
+    inactiveColor: { type: String, default: '#303133' },
+    /** 滑块宽度，单位rpx */
+    barWidth: { type: [Number, String] as PropType<number | string>, default: 40 },
+    /** 滑块高度，单位rpx */
+    barHeight: { type: [Number, String] as PropType<number | string>, default: 6 },
+    /** 单个tab标签的左右内边距之和，单位rpx */
+    gutter: { type: [Number, String] as PropType<number | string>, default: 40 },
+    /** z-index 层级 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: 1 },
+    /** tabs导航栏的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 居中模式，window/组件宽度 */
+    autoCenterMode: { type: String as unknown as PropType<TabsSwiperAutoCenterMode>, default: 'window' },
+    /** 组件内部读取的list参数中的属性名（tab名称） */
+    name: { type: String, default: 'name' },
+    /** 组件内部读取的list参数中的属性名（badge徽标数） */
+    count: { type: String, default: 'count' },
+    /** 设置badge徽标数的位置偏移，格式为 [x, y]，单位rpx */
+    offset: { type: Array as unknown as PropType<[number, number]>, default: () => [5, 20] },
+    /** 激活选项的字体是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** 活动tabs item的样式，对象形式 */
+    activeItemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示底部的滑块 */
+    showBar: { type: Boolean, default: true },
+    /** 底部滑块的样式，对象形式 */
+    barStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type TabsSwiperProps = ExtractPropTypes<typeof TabsSwiperProps>;

package/components/u-tabs-swiper/u-tabs-swiper.vue

@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, getCurrentInstance } from 'vue';
 import colorGradient from '../../libs/function/colorGradient';
+import { TabsSwiperProps } from './types';
 
 defineOptions({ name: 'u-tabs-swiper' });
 
@@ -45,56 +46,8 @@ defineOptions({ name: 'u-tabs-swiper' });
  * @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
  */
 
-// props 定义，保留参数注释
-const props = defineProps({
-    /** tabs是否可以左右拖动 */
-    isScroll: { type: Boolean, default: true },
-    /** 标签数组 */
-    list: { type: Array as () => Array<Record<string, any>>, default: () => [] },
-    /** 当前活动tab的索引 */
-    current: { type: [Number, String], default: 0 },
-    /** 导航栏的高度和行高，单位rpx */
-    height: { type: [Number, String], default: 80 },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [Number, String], default: 30 },
-    // 过渡动画时长, 单位s
-    // duration: {
-    // 	type: [Number, String],
-    // 	default: 0.5
-    // },
-    /** 外部swiper的宽度, 单位rpx */
-    swiperWidth: { type: [String, Number], default: 750 },
-    /** 选中项的主题颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 未选中项的颜色 */
-    inactiveColor: { type: String, default: '#303133' },
-    /** 菜单底部移动的bar的宽度，单位rpx */
-    barWidth: { type: [Number, String], default: 40 },
-    /** 移动bar的高度 */
-    barHeight: { type: [Number, String], default: 6 },
-    /** 单个tab的左或右内边距（各占一半），单位rpx */
-    gutter: { type: [Number, String], default: 40 },
-    /** 如果是绝对定位，添加z-index值 */
-    zIndex: { type: [Number, String], default: 1 },
-    /** 导航栏的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 滚动至中心目标类型 */
-    autoCenterMode: { type: String, default: 'window' },
-    /** 读取传入的数组对象的属性(tab名称) */
-    name: { type: String, default: 'name' },
-    /** 读取传入的数组对象的属性(徽标数) */
-    count: { type: String, default: 'count' },
-    /** 徽标数位置偏移 */
-    offset: { type: Array, default: () => [5, 20] },
-    /** 活动tab字体是否加粗 */
-    bold: { type: Boolean, default: true },
-    /** 当前活动tab item的样式 */
-    activeItemStyle: { type: Object, default: () => ({}) },
-    /** 是否显示底部的滑块 */
-    showBar: { type: Boolean, default: true },
-    /** 底部滑块的自定义样式 */
-    barStyle: { type: Object, default: () => ({}) }
-});
+// props 定义
+const props = defineProps(TabsSwiperProps);
 
 const color = colorGradient;
 const { windowWidth } = uni.getSystemInfoSync();

package/components/u-tag/types.ts

@@ -0,0 +1,37 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Shape, TagMode, TagSize, ThemeType } from '../../types/global';
+
+/**
+ * TagProps tag props 类型定义
+ * @description 标签组件，支持多种类型、尺寸、形状、可关闭等
+ */
+export const TagProps = {
+    /** 类型，primary、success、info、warning、error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 是否禁用 */
+    disabled: { type: [Boolean, String] as PropType<boolean | string>, default: false },
+    /** 尺寸，default/mini/medium */
+    size: { type: String as PropType<TagSize>, default: 'default' },
+    /** 形状，square为方形，circle为圆形 */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 显示的文本内容 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文字颜色 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '' },
+    /** 关闭按钮颜色 */
+    closeColor: { type: String, default: '' },
+    /** 索引值 */
+    index: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 模式，light/dark/plain等 */
+    mode: { type: String as PropType<TagMode>, default: 'light' },
+    /** 是否可关闭 */
+    closeable: { type: Boolean, default: false },
+    /** 是否显示 */
+    show: { type: Boolean, default: true }
+};
+
+export type TagProps = ExtractPropTypes<typeof TagProps>;