stellar-ui-plus 1.16.18

package/components/ste-table/useData.ts

@@ -0,0 +1,233 @@
+import type { CSSProperties, SetupContext } from 'vue'
+import { nextTick, ref } from 'vue'
+import type { TableColumnProps } from '../ste-table-column/props'
+import utils from '../../utils/utils'
+import type { Obj } from '../../types'
+import type { AllStateType, SelectColType } from './types'
+import type { TableEmits, TableProps } from './props'
+import { getStyleOrClass } from './utils'
+
+export default function useData(props: TableProps, emits: SetupContext<TableEmits>['emit']) {
+  const tableData = ref<Obj[]>([])
+
+  const columns = ref<TableColumnProps[]>([])
+  const sumData = ref([])
+  const currentRow = ref()
+
+  const checkStatesSet = ref(new Set<number>())
+  const checkStates = ref<number[]>([])
+  const canCheckStates = ref<number[]>([])
+
+  const checkAllState = ref<AllStateType>('none')
+  const selectType = ref<SelectColType>('checkbox')
+
+  function calcSum() {
+    if (!props.summaryMethod)
+      return
+    sumData.value = props.summaryMethod({ columns: columns.value, data: tableData.value })
+  }
+
+  function loadSelectType() {
+    columns.value.forEach((e) => {
+      if (e.type)
+        selectType.value = e.type as SelectColType
+    })
+  }
+
+  function loadCanCheckArr() {
+    const tmp: number[] = []
+    tableData.value.forEach((e, index) => {
+      const selectFlag = props.selectable ? props.selectable(e, index) : true
+      const readonlyFlag = props.readable ? !props.readable(e, index) : true
+
+      if (selectFlag && readonlyFlag)
+        tmp.push(index)
+    })
+    canCheckStates.value = tmp
+  }
+
+  function initSelection() {
+    loadCanCheckArr()
+    checkStates.value = checkStates.value.filter(e => canCheckStates.value.includes(e))
+    calcAllState()
+  }
+
+  function calcAllState() {
+    // 处理当前全选框的状态
+    if (checkStates.value.length > 0) {
+      if (canCheckStates.value.length === checkStates.value.length)
+        checkAllState.value = 'all'
+      else checkAllState.value = 'indeterminate'
+    }
+    else {
+      checkAllState.value = 'none'
+    }
+  }
+
+  function changeCheckAll() {
+    if (checkAllState.value !== 'all') {
+      emits(
+        'selectAll',
+        canCheckStates.value.map(e => tableData.value[e]),
+      )
+    }
+    else {
+      emits('selectAll', [])
+    }
+    toggleAllSelection()
+  }
+
+  // column组件更改Check状态
+  function handleCheck(row: Obj, isEmit = true) {
+    const rowIndex = row.rowIndex
+    const state = !checkStatesSet.value.has(rowIndex)
+    if (selectType.value === 'radio') {
+      checkStatesSet.value = new Set()
+      checkStatesSet.value.add(rowIndex)
+    }
+    else {
+      if (state)
+        checkStatesSet.value.add(rowIndex)
+      else checkStatesSet.value.delete(rowIndex)
+    }
+    checkStates.value = Array.from(checkStatesSet.value)
+
+    isEmit && emits('select', getSelection(), row)
+    // this.currentRow = row;
+    calcAllState()
+    // this.$forceUpdate();
+  }
+
+  function cellClick(row: Obj, column: TableColumnProps, event: Event) {
+    emits('cellClick', row, column, event)
+  }
+  function rowClick(row: Obj, event: Event) {
+    currentRow.value = row
+    emits('rowClick', row, event)
+  }
+  function headerClick(column: TableColumnProps, event: Event) {
+    emits('headerClick', column, event)
+  }
+  function handleScrollToLower() {
+    emits('scrollToLower')
+  }
+
+  // ***自定义class和style相关***
+  function getHeaderRowClass() {
+    const classes = [getStyleOrClass(props.headerRowClassName)]
+    return classes.join(' ')
+  }
+  function getHeaderRowStyle() {
+    return getStyleOrClass<object>(props.headerRowStyle)
+  }
+  function getHeaderCellClass(column: TableColumnProps, columnIndex: number) {
+    const classArr = []
+    if (column.headerAlign && column.headerAlign !== 'left')
+      classArr.push(`align-${column.headerAlign}`)
+    else if (column.align && column.align !== 'left')
+      classArr.push(`align-${column.align}`)
+
+    classArr.push(getStyleOrClass(props.headerCellClassName, { columnIndex, column }))
+    return classArr.join(' ')
+  }
+  function getHeaderCellStyle(column: TableColumnProps, columnIndex: number, isProp = false) {
+    if (!isProp) {
+      const style = {} as CSSProperties
+      if (column.width)
+      // style.width = utils.addUnit(column.width)
+      // style.flexBasis = utils.addUnit(column.width);
+        style.flex = `0 1 ${utils.addUnit(column.width)}`
+
+      if (column.minWidth)
+        style.minWidth = utils.addUnit(column.minWidth)
+
+      return style
+    }
+    else {
+      return getStyleOrClass<object>(props.headerCellStyle, { columnIndex, column })
+    }
+  }
+  function getRowClass(row: Obj, rowIndex: number) {
+    const classArr: any[] = [`row-${rowIndex}`]
+    if (props.highlightCurrentRow && utils.deepEqual(row, currentRow.value, ['rowIndex', 'colIndex']))
+      classArr.push('current-row')
+
+    if (props.highlightSelectionRow && checkStatesSet.value.has(rowIndex))
+      classArr.push('selection-row')
+
+    // const t = getStyleOrClass(props.rowClassName, { row, rowIndex })
+    classArr.push(getStyleOrClass(props.rowClassName, { row, rowIndex }))
+    return classArr.join(' ')
+  }
+  function getRowStyle(row: Obj, rowIndex: number) {
+    return getStyleOrClass(props.rowStyle, { row, rowIndex })
+  }
+
+  // ***Table Methods 方法***
+  // 获取当前选择的数据
+  function getSelection() {
+    return checkStates.value.map(e => tableData.value[e])
+  }
+
+  // 清空选择项
+  function clearSelection() {
+    checkStatesSet.value.clear()
+    checkStates.value = Array.from(checkStatesSet.value)
+    checkAllState.value = 'none'
+  }
+  // 切换某行的选中状态
+  function toggleRowSelection(row: Obj, isTriggerSelectEvent = true) {
+    nextTick(() => {
+      const index = tableData.value.findIndex(e => utils.deepEqual(row, e, ['rowIndex', 'colIndex']))
+      if (canCheckStates.value.indexOf(index) <= -1)
+        return
+      row.rowIndex = index
+      handleCheck(row, isTriggerSelectEvent)
+    })
+  }
+  // 切换全选的状态
+  function toggleAllSelection() {
+    if (checkAllState.value === 'all') {
+      clearSelection()
+    }
+    else {
+      canCheckStates.value.forEach((e) => {
+        checkStatesSet.value.add(e)
+      })
+      checkStates.value = Array.from(checkStatesSet.value)
+      checkAllState.value = 'all'
+    }
+  }
+
+  return {
+    tableData,
+    columns,
+    sumData,
+    currentRow,
+    checkStatesSet,
+    checkStates,
+    canCheckStates,
+    checkAllState,
+    selectType,
+    calcSum,
+    loadSelectType,
+    loadCanCheckArr,
+    getHeaderRowStyle,
+    getHeaderRowClass,
+    getHeaderCellStyle,
+    getHeaderCellClass,
+    headerClick,
+    changeCheckAll,
+    handleScrollToLower,
+    getRowStyle,
+    getRowClass,
+    initSelection,
+    rowClick,
+    handleCheck,
+    cellClick,
+    toggleRowSelection,
+    toggleAllSelection,
+    clearSelection,
+    getSelection,
+  }
+}

package/components/ste-table/utils.ts

@@ -0,0 +1,11 @@
+type StyleOrClassFunction<T> = (params: object) => T
+type StyleOrClass<T> = T | StyleOrClassFunction<T> | undefined
+
+function getStyleOrClass<T extends string | object>(fun: StyleOrClass<T>, params: object = {}): T | undefined {
+  if (typeof fun === 'function' && fun instanceof Function)
+    return (fun as StyleOrClassFunction<T>)(params)
+  else
+    return fun
+}
+
+export { getStyleOrClass }

package/components/ste-table-column/checkbox-icon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { SELECTION_COLOR_CONFIG } from '../ste-table/props';
+import type { PropType } from 'vue';
+
+const CHECK_ICON_SIZE = 36;
+const props = defineProps({
+    checked: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    iconColorConfig: {
+        type: Object as PropType<typeof SELECTION_COLOR_CONFIG>,
+        default: () => SELECTION_COLOR_CONFIG,
+    },
+});
+</script>
+
+<template>
+    <view class="ste-table-checkbox-icon">
+        <ste-icon code="&#xe6ae;" :color="iconColorConfig.disabled || SELECTION_COLOR_CONFIG.disabled" :size="CHECK_ICON_SIZE" v-if="disabled" />
+        <ste-icon code="&#xe6ac;" :color="iconColorConfig.readonly || SELECTION_COLOR_CONFIG.readonly" :size="CHECK_ICON_SIZE" v-else-if="props.readonly" />
+        <template v-else>
+            <ste-icon code="&#xe6ac;" :color="iconColorConfig.main || SELECTION_COLOR_CONFIG.main" :size="CHECK_ICON_SIZE" v-if="checked" />
+            <ste-icon code="&#xe6af;" :color="iconColorConfig.unSelected || SELECTION_COLOR_CONFIG.unSelected" :size="CHECK_ICON_SIZE" v-else />
+        </template>
+    </view>
+</template>

package/components/ste-table-column/common.scss

@@ -0,0 +1,52 @@
+@mixin cell {
+    flex: 1;
+    // padding: 24rpx 32rpx;
+    border-bottom: $default-border;
+    text-align: left;
+    min-height: 80rpx;
+    font-size: var(--font-size-24, 24rpx);
+    // vertical-align: middle;
+    display: flex;
+    align-items: center;
+}
+
+.cell-box {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+}
+
+&.border {
+    border-right: $default-border;
+}
+
+&.selection {
+}
+
+&.align-text-center {
+    text-align: center;
+    .cell-box {
+        text-align: center;
+    }
+}
+
+&.align-text-right {
+    text-align: right;
+    .cell-box {
+        text-align: right;
+    }
+}
+
+&.align-center {
+    justify-content: center;
+    .cell-box {
+        justify-content: center;
+    }
+}
+
+&.align-right {
+    justify-content: flex-end;
+    .cell-box {
+        justify-content: flex-end;
+    }
+}

package/components/ste-table-column/props.ts

@@ -0,0 +1,18 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { AlignType } from '../../types'
+import type { SelectColType } from '../ste-table/types'
+
+const tableColumnProps = {
+  type: { type: String as PropType<SelectColType>, default: '' },
+  customKey: { type: String, default: '' },
+  label: { type: String, default: '' },
+  prop: { type: String, default: '' },
+  width: { type: [String, Number], default: '' },
+  minWidth: { type: String, default: '' },
+  align: { type: String as PropType<AlignType>, default: 'left' },
+  headerAlign: { type: String as PropType<AlignType>, default: 'left' },
+}
+
+export type TableColumnProps = ExtractPropTypes<typeof tableColumnProps>
+
+export default tableColumnProps

package/components/ste-table-column/radio-icon.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { SELECTION_COLOR_CONFIG } from '../ste-table/props';
+import type { PropType } from 'vue';
+import utils from '../../utils/utils';
+
+const props = defineProps({
+    checked: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    iconColorConfig: {
+        type: Object as PropType<typeof SELECTION_COLOR_CONFIG>,
+        default: () => SELECTION_COLOR_CONFIG,
+    },
+});
+
+const cmpRootClass = computed(() => {
+    let classArr = [];
+    if (props.checked) {
+        classArr.push('checked');
+    }
+    if (props.disabled) {
+        classArr.push('disabled');
+    }
+    if (props.readonly) {
+        classArr.push('readonly');
+    }
+
+    return classArr.join(' ');
+});
+
+const cmpRootStyle = computed(() => {
+    return {
+        '--main-color': props.iconColorConfig.main || SELECTION_COLOR_CONFIG.main,
+        '--main-outer-color': utils.Color.formatColor(props.iconColorConfig.main || SELECTION_COLOR_CONFIG.main, 0.2),
+        '--disabled-color': props.iconColorConfig.disabled || SELECTION_COLOR_CONFIG.disabled,
+        '--un-selected-color': props.iconColorConfig.unSelected || SELECTION_COLOR_CONFIG.unSelected,
+        '--readonly-color': props.iconColorConfig.readonly || SELECTION_COLOR_CONFIG.readonly,
+        '--readonly-outer-color': utils.Color.formatColor(props.iconColorConfig.readonly || SELECTION_COLOR_CONFIG.readonly, 0.2),
+    };
+});
+</script>
+
+<template>
+    <view class="radio-icon-root" :class="[cmpRootClass]" :style="cmpRootStyle">
+        <view class="icon-1"></view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.radio-icon-root {
+    width: 32rpx;
+    height: 32rpx;
+
+    border-radius: 50%;
+    border: 2rpx solid var(--un-selected-color);
+    position: relative;
+
+    &.checked {
+        border: none;
+        background-color: var(--main-outer-color);
+        .icon-1 {
+            background-color: var(--main-color);
+        }
+    }
+
+    &.readonly {
+        border: none;
+        background-color: var(--readonly-outer-color);
+        .icon-1 {
+            background-color: var(--readonly-color);
+        }
+    }
+
+    &.disabled {
+        border: none;
+        background-color: var(--disabled-color);
+    }
+    .icon-1 {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 50%;
+
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+</style>

package/components/ste-table-column/ste-table-column.vue

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { computed, ref, type CSSProperties, defineOptions } from 'vue';
+import type { Obj } from '../../types';
+import propsData from './props';
+import utils from '../../utils/utils';
+import { getStyleOrClass } from '../ste-table/utils';
+import { useInject } from '../../utils/mixin';
+import { TABLE_KEY, SELECTION_COLOR_CONFIG, type TableProps } from '../ste-table/props';
+import CheckBoxIcon from './checkbox-icon.vue';
+import RadioIcon from './radio-icon.vue';
+
+const componentName = `ste-table-column`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+
+const Parent = useInject<{ props: Required<TableProps>; checkStates: globalThis.Ref<number[]>; handleCheck: (...args: any[]) => void; cellClick: (...args: any[]) => void }>(TABLE_KEY);
+const parent = Parent.parent;
+const parentProps = Parent.parent?.props as TableProps;
+
+const row = ref<Obj>({});
+const selectionIconColor = ref<typeof SELECTION_COLOR_CONFIG>(parentProps.selectionIconColor);
+
+defineExpose({ row });
+
+const cmpRootStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (props.width) {
+        // style.width = utils.addUnit(props.width);
+        // style.flexBasis = utils.addUnit(props.width);
+        // style.flexGrow = 0;
+        style.flex = `0 1 ${utils.addUnit(props.width)}`;
+    }
+    if (props.minWidth) {
+        style.minWidth = utils.addUnit(props.minWidth);
+    }
+    return style;
+});
+
+const cmpCellStyle = computed(() => {
+    const cellClassParam = {
+        column: props,
+        columnIndex: row.value.colIndex,
+        row: row.value.row,
+        rowIndex: row.value.rowIndex,
+    };
+    return getStyleOrClass<object>(parentProps.cellStyle, cellClassParam);
+});
+
+const cmpRootClass = computed(() => {
+    let classArr = [];
+    classArr.push(props.type);
+
+    if (props.align && props.align !== 'left') {
+        classArr.push('align-' + props.align);
+    }
+
+    if (parentProps.border) {
+        classArr.push('border');
+    }
+
+    const cellClassParam = {
+        column: props,
+        columnIndex: row.value.colIndex,
+        row: row.value.row,
+        rowIndex: row.value.rowIndex,
+    };
+    classArr.push(getStyleOrClass<string>(parentProps.cellClassName as any, cellClassParam));
+
+    return classArr.join(' ');
+});
+
+const cmpShowCheck = computed(() => {
+    if (!parent?.checkStates.value || parent.checkStates.value.length == 0) return false;
+    let item = parent.checkStates.value.find((e: number) => e == row.value.rowIndex);
+    if (item != undefined) {
+        return true;
+    }
+    return false;
+});
+
+const cmpDisableCheck = computed(() => {
+    if (parentProps.selectable && props.type) {
+        return !parentProps.selectable(row.value, row.value.rowIndex);
+    }
+    return false;
+});
+
+const cmpReadonlyCheck = computed(() => {
+    if (parentProps.readable && props.type) {
+        return parentProps.readable(row.value, row.value.rowIndex);
+    }
+    return false;
+});
+
+function changeCheck(this: any) {
+    if (!cmpDisableCheck.value && !cmpReadonlyCheck.value) {
+        parent?.handleCheck(row.value);
+    }
+}
+
+function cellText(this: any) {
+    if (parentProps.formatter) {
+        let text = parentProps.formatter(row.value, props.customKey);
+        if (!text) {
+            text = row.value[props.prop];
+        }
+        return text;
+    } else {
+        if (row.value[props.prop]) {
+            return row.value[props.prop];
+        } else {
+            return parentProps.emptyText || '-';
+        }
+    }
+}
+
+function cellClick(this: any, event: Event) {
+    parent?.cellClick(row.value, props, event);
+    // 扩大选中热区
+    if (props.type == 'checkbox' || props.type == 'radio') {
+        changeCheck();
+    }
+}
+</script>
+
+<template>
+    <view class="ste-table-cell" :class="[cmpRootClass]" :style="[cmpRootStyle, cmpCellStyle as CSSProperties]" @click="cellClick">
+        <template v-if="type">
+            <view class="cell-box" v-if="type == 'checkbox'" @click.stop="changeCheck">
+                <check-box-icon :disabled="cmpDisableCheck" :readonly="cmpReadonlyCheck" :checked="cmpShowCheck" :icon-color-config="selectionIconColor" />
+            </view>
+            <view class="cell-box" v-if="type == 'radio'" @click.stop="changeCheck">
+                <radio-icon :disabled="cmpDisableCheck" :checked="cmpShowCheck" :readonly="cmpReadonlyCheck" :icon-color-config="selectionIconColor" />
+            </view>
+            <view class="cell-box" v-if="type == 'index'">
+                {{ row.rowIndex + 1 }}
+            </view>
+        </template>
+        <template v-else>
+            <slot v-if="row[prop] || !$slots.empty">
+                <view class="cell-box">
+                    {{ cellText() }}
+                </view>
+            </slot>
+            <view class="cell-box" v-else>
+                <slot name="empty"><text>暂无数据</text></slot>
+            </view>
+        </template>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-table-cell {
+    @import './var.scss';
+    @import './common.scss';
+    @include cell;
+
+    &.row-span {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+</style>

package/components/ste-table-column/var.scss

@@ -0,0 +1 @@
+$default-border: 2rpx solid #ebebeb;

package/components/ste-tabs/ATTRIBUTES.md

@@ -0,0 +1,52 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `active` | 当前激活的选项支持v-model:active双向绑定（类型为number时绑定index，类型为string时绑定name） | `number / string` | `0` | - | - |
+| `type` | 样式风格类型 | `string` | `line` | `line`：线型<br/>`card`：卡片型 | - |
+| `showImage` | 是否显示图片 | `boolean` | `false` | - | - |
+| `showTitle` | 是否显示主标题 | `boolean` | `true` | - | - |
+| `showSubtitle` | 是否显示副标题 | `boolean` | `false` | - | - |
+| `color` | 主题色（滑块颜色，边框颜色，选中的背景色，激活下拉列表中选项颜色） | `string` | `#0090FF` | - | - |
+| `background` | 背景 | `string` | - | - | - |
+| `radius` | 圆角,单位RPX | `number / string` | `0` | - | - |
+| `duration` | 动画时间，单位秒，设置为 0 可以禁用动画 | `number / string` | `0.3` | - | - |
+| `showLine` | 底部条是否显示（显示副标题的情况下会自动隐藏） | `boolean` | `true` | - | - |
+| `lineWidth` | 底部条宽度，默认单位rpx | `number / string` | `52` | - | - |
+| `lineHeight` | 底部条高度，默认单位rpx | `number / string` | `6` | - | - |
+| `border` | 是否显示标签栏外边框，仅在 type=line 时有效 | `boolean` | `false` | - | - |
+| `ellipsis` | 是否省略过长的标题文字 | `boolean` | `false` | - | - |
+| `tabWidth` | tab内容的宽度 | `number / string` | `auto` | - | - |
+| `tabPadding` | 选项内边距，默认24，单位rpx | `number / string` | `24` | - | - |
+| `tabSpace` | tab间距rpx | `number / string` | `0` | - | - |
+| `divideNum` | tab等分数量，设置为 0 ，则不等分 | `number / string` | `4` | - | - |
+| `sticky` | 是否使用粘性布局 | `boolean` | `false` | - | - |
+| `offsetTop` | 粘性布局下吸顶时与顶部的距离，单位rpx | `number / string` | `0` | - | - |
+| `swipeable` | 是否开启手势左右滑动切换 | `boolean` | `false` | - | - |
+| `titleColor` | 主标题字体颜色和下拉列表中选项颜色 | `string` | `#000000` | - | - |
+| `activeTitleColor` | 激活主标题字体颜色 | `string` | `#000000` | - | - |
+| `titleHeight` | 主标题高度 | `number / string` | `48` | - | - |
+| `subColor` | 子标题字体颜色和下拉列表中选项颜色 | `string` | `#000000` | - | - |
+| `activeSubColor` | 激活子标题字体颜色和下拉列表中选项颜色 | `string` | `#ffffff` | - | - |
+| `subTitleHeight` | 子标题高度 | `number / string` | `42` | - | - |
+| `subTitleRadius` | 子标题圆角 | `number / string` | `21` | - | - |
+| `imageWidth` | 图片宽度，默认80，单位rpx | `number / string` | `80` | - | - |
+| `imageHeight` | 图片高度，默认80，单位rpx | `number / string` | `80` | - | - |
+| `imageRadius` | 图片圆角，默认50%，单位rpx | `number / string` | `50%` | - | - |
+| `imageBorderWidth` | 选中图片边框宽度，默认4，单位rpx | `number / string` | `4` | - | - |
+| `showGapLine` | 是否显示分隔符 | `boolean` | `false` | - | - |
+| `lock` | 是否锁定tab(无法切换) | `boolean` | `false` | - | - |
+| `disabled` | 是否禁用tab(所有功能失效) | `boolean` | `false` | - | - |
+| `pullDown` | 是否有下拉选择按钮 | `boolean` | `false` | - | - |
+| `placeholder` | 下拉占位符 | `string` | `请选择` | - | - |
+| `maskTop` | 下拉蒙层顶部距离 | `number / string` | `0` | - | - |
+| `maskRight` | 下拉蒙层右侧距离 | `number / string` | `0` | - | - |
+| `maskBottom` | 下拉蒙层底部距离 | `number / string` | `0` | - | - |
+| `maskLeft` | 下拉蒙层左侧距离 | `number / string` | `0` | - | - |
+| `maskZindex` | 下拉蒙层层级 | `number / string` | `1001` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click-tab` | 点击tab触发 | - | - |
+| `change` | 切换tab触发 | - | - |