stellar-ui-v2 1.35.3

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

@@ -0,0 +1,204 @@
+<template>
+	<view class="wrapper">
+		<view
+			class="ellipsis-box"
+			@touchstart="handleTouchStart"
+			@touchend="handleTouchEnd"
+			@mousedown="handleTouchStart"
+		>
+			{{ text }}
+		</view>
+		<!-- 不做展示，正常显示文字长度，用于判断是否超过长度 -->
+		<text class="measure-text">{{ text }}</text>
+
+		<view
+			class="popover"
+			:class="showPopover ? 'show' : 'hidden'"
+			:style="{ left: popoverLeft + 'px', top: popoverTop + 'px' }"
+			:animation="animationData"
+		>
+			<view class="popover-content">
+				{{ text }}
+			</view>
+			<view class="popover-arrow" :style="{ left: arrowLeft + '%' }"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+const DURATION = 200;
+const ANIMATION_PROP = { duration: DURATION, timingFunction: 'ease-out' };
+export default {
+	props: {
+		text: {
+			type: [String, null],
+			default: '',
+		},
+	},
+	data() {
+		return {
+			pressTimer: null,
+			showPopover: false,
+			popoverLeft: 0,
+			popoverTop: 0,
+			arrowLeft: 50, // 箭头的左边距百分比
+			isTextOverflow: false,
+			animationData: null,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.checkTextOverflow();
+		});
+	},
+	watch: {
+		text() {
+			this.checkTextOverflow();
+		},
+	},
+	methods: {
+		async checkTextOverflow() {
+			const containerData = await utils.querySelector('.ellipsis-box', this);
+			let textData = await utils.querySelector('.measure-text', this);
+
+			if (containerData && textData) {
+				this.isTextOverflow = textData.width > containerData.width;
+			}
+		},
+		handleTouchStart(e) {
+			if (!this.isTextOverflow) return;
+
+			this.pressTimer = setTimeout(() => {
+				this.showPopover = true;
+				this.$nextTick(() => {
+					this.updatePopoverPosition();
+				});
+			}, 100);
+			// #ifdef WEB
+			window.addEventListener('mouseup', this.doHide);
+			// #endif
+		},
+		async updatePopoverPosition() {
+			const containerData = await utils.querySelector('.ellipsis-box', this);
+			const popoverData = await utils.querySelector('.popover', this);
+			if (!containerData || !popoverData) return;
+
+			const systemInfo = utils.System;
+			const MARGIN = 10; // 间隔像素，避免贴边或者贴着弹出元素
+
+			// 计算文本框中心点
+			const boxCenter = containerData.left + containerData.width / 2;
+
+			// 计算 popover 的位置
+			let left = boxCenter - popoverData.width / 2;
+
+			// 确保 popover 不超出屏幕左边
+			if (left < MARGIN) {
+				left = MARGIN;
+			}
+
+			// 确保 popover 不超出屏幕右边
+			if (left + popoverData.width > systemInfo.getWindowWidth() - MARGIN) {
+				left = systemInfo.getWindowWidth() - popoverData.width - MARGIN;
+			}
+
+			// 计算箭头位置（相对于 popover 的百分比）
+			const arrowLeft = ((boxCenter - left) / popoverData.width) * 100;
+			this.popoverLeft = left;
+			this.popoverTop = containerData.top - popoverData.height - (MARGIN + 5);
+
+			this.arrowLeft = Math.max(10, Math.min(90, arrowLeft)); // 限制箭头在 10% 到 90% 之间
+			this.doShow();
+		},
+
+		handleTouchEnd() {
+			this.doHide();
+		},
+
+		doShow() {
+			this.$nextTick(() => {
+				let animation = uni.createAnimation(ANIMATION_PROP);
+				animation.opacity(1).step();
+				this.animationData = animation.export();
+			});
+		},
+		doHide() {
+			if (this.pressTimer) {
+				clearTimeout(this.pressTimer);
+				this.pressTimer = null;
+			}
+			let animation = uni.createAnimation(ANIMATION_PROP);
+			animation.opacity(0).step();
+			this.animationData = animation.export();
+			setTimeout(() => {
+				this.showPopover = false;
+			}, DURATION);
+			// #ifdef WEB
+			window.removeEventListener('mouseup', this.doHide);
+			// #endif
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+	position: relative;
+}
+
+.ellipsis-box {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	// #ifdef H5
+	user-select: none;
+	// #endif
+}
+
+.measure-text {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	white-space: nowrap;
+	visibility: hidden;
+}
+
+.popover {
+	position: fixed;
+	z-index: 999;
+	pointer-events: none;
+	opacity: 0;
+	&.show {
+		display: block;
+	}
+
+	&.hidden {
+		display: none;
+	}
+}
+
+.popover-content {
+	background-color: rgba(0, 0, 0, 0.8);
+	color: white;
+	padding: 8px 12px;
+	border-radius: 4px;
+	font-size: 14px;
+	line-height: 1.4;
+	word-break: break-word;
+	white-space: normal;
+	max-width: 60vw;
+	text-align: left;
+}
+
+.popover-arrow {
+	position: absolute;
+	bottom: -6px;
+	transform: translateX(-50%);
+	width: 0;
+	height: 0;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-top: 6px solid rgba(0, 0, 0, 0.8);
+}
+</style>

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

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

package/components/ste-tabs/README.md

@@ -0,0 +1,475 @@
+# Tabs 标签页
+标签页组件，集成了常见标签页所需功能。
+
+---$
+
+### 代码演示
+**JavaScript**后面的演示代码中涉及到的变量和方法都使用本javasaript代码
+```javascript
+export default {
+	data() {
+		return {
+			list1: [
+				{
+					title: '标签1',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+				},
+				{
+					title: '标签2',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+				},
+				{
+					title: '标签3标签3标签3标签3',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+				},
+				{
+					title: '标签4',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+				},
+			],
+		};
+	},
+	computed: {
+		list2() {
+			return [].concat(this.list1, [
+				{
+					title: '标签5',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+				},
+				{
+					title: '标签6',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img6.jfif',
+				},
+				{
+					title: '标签7',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img7.jfif',
+				},
+				{
+					title: '标签8',
+					image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+					content: 'https://image.whzb.com/chain/StellarUI/image/img8.jfif',
+				},
+			]);
+		},
+	},
+};
+```
+#### 基础用法
+- 外层使用`ste-tabs`父标签包裹
+	- `divideNum`表示自动一屏均分标签最大数量，默认值为`4`，当子标签数量大于该值时，则根据实际宽度自动排列
+	- `active`表示当前激活的选项，默认值`0`，支持`sync`双向绑定；当类型为`Number`时绑定子元素的`index`属性，当类型为`String`时，绑定子元素的`name`属性
+	- `ste-tabs`标签设置`tabWidth`属性可设置每一项标签的宽度
+	- `ellipsis`属性开启时可当文本长度大于标签宽度时会显示省略号
+- 内层使用`ste-tab`子标签描述每一个标签页
+	- `title`属性设置标签主标题
+	- `index`或`name`设置标签唯一值，与父元素的`active`绑定
+
+
+```html
+<!-- 标签数量小于或等于divideNum时，标签宽度均分 -->
+<ste-tabs>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 子元素数量大于divideNum时，自动排列 -->
+<ste-tabs>
+	<ste-tab v-for="(item, index) in list2" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 统一标签宽度 -->
+<ste-tabs tabWidth="180">
+	<ste-tab v-for="(item, index) in list2" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 超出显示省略号 -->
+<ste-tabs tabWidth="180" ellipsis>
+	<ste-tab v-for="(item, index) in list2" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+
+#### 吸顶
+- `ste-tabs`标签设置`sticky`属性可让标签自动吸顶
+```html
+<ste-tabs showSubtitle sticky>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 图片和子标题
+- `ste-tabs`标签
+	- 设置`showSubtitle`属性可以开启子标题显示，开启子标题显示时，下划线会自动隐藏
+	- 设置`showImage`属性可以开启图片显示
+	- `imageBorderWidth`属性可以设置激活选项图片的边框宽度，设置为`0`时不展示
+- `ste-tab`标签
+	- `subTitle`属性设置每一项的子标题内容，长度不得大于`6`，大于`6`时会被强制截断
+	- `image`属性设置每一项的图片链接，同原生`image`的`src`属性
+	- `imageWidth`和`imageHeight`属性可以自定义图片大小，`imageRadius`属性可以自定义标签圆角弧度
+```html
+<!-- 当显示子标题时，下划线会自动隐藏 -->
+<ste-tabs showSubtitle>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 展示图片主标题和子标题 -->
+<ste-tabs showSubtitle showImage>
+	<ste-tab
+		v-for="(item, index) in list1"
+		:key="index"
+		:image="item.image"
+		:title="item.title"
+		subTitle="子标题"
+		:index="index"
+	>
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 隐藏主标题，展示图片主标题和子标题，图片边框隐藏 -->
+<ste-tabs showSubtitle showImage :showTitle="false" imageBorderWidth="0">
+	<ste-tab v-for="(item, index) in list1" :key="index" :image="item.image" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 图片大小和圆角 -->
+<ste-tabs showSubtitle showImage :showTitle="false" imageWidth="200" imageHeight="90" imageRadius="18">
+	<ste-tab v-for="(item, index) in list2" :key="index" :image="item.image" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 下拉选项
+- 开启下拉选项，当标签数量小于`divideNum`时不生效
+- `ste-tabs`标签
+	- `pullDown`属性可以开启下拉选项卡
+	- `maskLeft`、`maskRight`、`maskBottom`、`maskTop`属性可以设置开启下拉选项时，背景蒙层的位置
+```html
+<ste-tabs pullDown :showTitle="false" showImage showSubtitle tabWidth="180" tabPadding="12">
+	<ste-tab v-for="(item, index) in list2" :key="index" :image="item.image" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!--  -->
+<ste-tabs
+	pullDown
+	:showTitle="false"
+	showImage
+	showSubtitle
+	tabWidth="180"
+	tabPadding="12"
+	maskLeft="30"
+	maskRight="30"
+	maskBottom="120"
+	maskTop="180"
+>
+	<ste-tab v-for="(item, index) in list2" :key="index" :image="item.image" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 颜色
+- 除背景外的其他颜色只支持`16进制`、`rgb`或者`rgba`格式
+- `ste-tabs`标签
+	- `color`属性可以修改主题颜色，包括(滑块颜色，边框颜色，选中图片边框颜色，选中的背景色，激活下拉列表中选项颜色)，默认值#0090FF
+	- `background`属性可以设置标签栏背景，支持图片和颜色
+	- `titleColor`设置主标题默认字体颜色
+	- `activeTitleColor`设置主标题激活状态下的字体颜色
+	- `subColor`设置子标题默认颜色
+	- `activeSubColor`设置子标题激活状态下的字体颜色
+```html
+<!-- 主题和背景 -->
+<ste-tabs pullDown showImage showSubtitle tabWidth="180" tabPadding="12" color="#f00" background="#ffa">
+	<ste-tab
+		v-for="(item, index) in list2"
+		:key="index"
+		:title="item.title"
+		:image="item.image"
+		subTitle="子标题"
+		:index="index"
+	>
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 主标题字体颜色 -->
+<ste-tabs pullDown titleColor="#f90" activeTitleColor="#09f">
+	<ste-tab v-for="(item, index) in list2" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 子标题字体颜色 -->
+<ste-tabs pullDown showSubtitle subColor="#09f" activeSubColor="#f90" tabWidth="180" tabPadding="12">
+	<ste-tab v-for="(item, index) in list2" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 手势切换
+- `ste-tabs`标签设置`swipeable`属性可开启手势切换
+```html
+<ste-tabs showSubtitle swipeable>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 卡片模式
+- `ste-tabs`标签
+	- `type`等于`card`时开启卡片模式
+	- 设置`border`属性可以为卡片加边框（只在卡片模式下生效）
+```html
+<!-- 开启卡片模式 -->
+<ste-tabs swipeable type="card">
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 带边框 -->
+<ste-tabs swipeable type="card" border>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 间距
+- `ste-tabs`标签的`tabSpace`可以修改标签间距，默认为`0`
+```html
+<ste-tabs swipeable type="card" tabSpace="12">
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+
+#### 分割线
+- `ste-tabs`标签设置`showGapLine`时在子项之间展示分割线
+```html
+<!-- 线性模式下展示分割线 -->
+<ste-tabs swipeable showGapLine>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 显示子标题样式 -->
+<ste-tabs swipeable showGapLine showSubtitle>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 卡片模式下展示分割线 -->
+<ste-tabs type="card" swipeable showGapLine tabSpace="14">
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+
+
+#### 锁定和禁用
+- `ste-tabs`标签
+	- `lock`可以锁定标签栏不让操作，样式不变
+	- `disabled`可以禁用全部标签栏不让操作，标签栏变成灰色
+- `ste-tab`标签
+	- `disabled`可以禁用当前标签页不让操作，当前标签变成灰色
+```html
+<!-- 锁定 -->
+<ste-tabs swipeable showGapLine showSubtitle lock>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 全局禁用 -->
+<ste-tabs swipeable showGapLine showSubtitle disabled>
+	<ste-tab v-for="(item, index) in list1" :key="index" :title="item.title" subTitle="子标题" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+<!-- 单项禁用 -->
+<ste-tabs swipeable showGapLine showSubtitle>
+	<ste-tab
+		v-for="(item, index) in list1"
+		:key="index"
+		:title="item.title"
+		subTitle="子标题"
+		:index="index"
+		:disabled="index === 1"
+	>
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+#### 徽标
+- `ste-tab`标签
+	- `showDot`右上角是否展示小红点
+	- `badge`右上角徽标的内容
+	- `showZeroBadge`当 badge 为数字 0 时，是否展示徽标
+```html
+<ste-tabs swipeable showGapLine showSubtitle>
+	<ste-tab
+		v-for="(item, index) in list1"
+		:key="index"
+		:title="item.title"
+		:badge="index"
+		subTitle="子标题"
+		:index="index"
+	>
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+
+#### 异形
+- `ste-tabs`标签
+	- `showSubtitle`显示子标题
+	- `showTitle` = `false`隐藏主标题
+	- `background`调整标签栏背景
+	- `subColor`调整子标题颜色
+	- `activeSubColor`调整选中子标题颜色
+	- `color`调整主题色（子标签背景色）
+	- `tabPadding`调整标签内边距
+	- `subTitleHeight`调整子标题高度
+	- `showLine` = `false`隐藏下划线
+	- `radius`调整标签栏圆角
+	- `subTitleRadius`调整子标题圆角
+```html
+<ste-tabs
+	showSubtitle
+	:showTitle="false"
+	background="#0090FF"
+	subColor="#fff"
+	activeSubColor="#0090FF"
+	color="#fff"
+	tabPadding="6"
+	subTitleHeight="66"
+	:showLine="false"
+	radius="45"
+	subTitleRadius="33"
+>
+	<ste-tab v-for="(item, index) in list1" :key="index" :subTitle="item.title" :index="index">
+		<view>{{ item.title }}内容</view>
+		<image style="width: 100%; height: 300px" :src="item.content" />
+	</ste-tab>
+</ste-tabs>
+```
+
+### API
+#### Tabs Props
+背景之外的颜色属性只支持`16进制`、`RGB`、`RGBA`格式
+| 属性名						| 说明																																											| 类型								| 默认值				| 可选值																	| 支持版本	|
+| -----							| -----																																										| -----							| -----				| -----																	| -----		|
+| `active`					| 当前激活的选项，支持sync双向绑定 （类型为number时tab绑定index，类型为string时tab绑定name）	| `String`/`Number`	| `0`					| -																			| -				|
+| `type`						| 样式风格类型																																							| `String`					| `"line"`		| `"line"`线性模式<br/>`"card"`卡片模式	| -				|
+| `color`						| 主题色（滑块颜色，边框颜色，选中的背景色，激活下拉列表中选项颜色）													| `String`					| `#0090FF`		| -																			| -				|
+| `radius`					| 标签栏圆角	（单位rpx）																																		| `String`/`Number`	| `0`					| -																			| -				|
+| `background`			| 标签栏背景																																								| `String`					| `""`				| -																			| -				|
+| `showImage`				| 是否显示图片																																							| `Boolean`					| `false`			| -																			| -				|
+| `showTitle`				| 是否显示标题																																							| `Boolean`					| `true`			| -																			| -				|
+| `titleHeight`			| 主标题高度	（单位rpx）																																		| `String`/`Number`	| `48`				| -																			| -				|
+| `showSubtitle`		| 是否显示子标题																																						| `Boolean`					| `false`			| -																			| -				|
+| `duration`				| 切换动画时长	（单位秒）																																		| `Number`					| `0.3`				| -																			| -				|
+| `showLine`				| 底部条是否展示	(显示副标题时无法展示)																											| `Boolean`					| `true`			| -																			| -				|
+| `lineWidth`				| 底部条宽度	（单位rpx）																																		| `String`/`Number`	| `52`				| -																			| -				|
+| `lineHeight`			| 底部条高度	（单位rpx）																																		| `String`/`Number`	| `6`					| -																			| -				|
+| `border`					| 是否显示边框	（仅在card模式下生效）																												| `Boolean`					| `false`			| -																			| -				|
+| `ellipsis`				| 是否开启选项文本超长省略																																	| `Boolean`					| `false`			| -																			| -				|
+| `tabWidth`				| 选项宽度 （单位rpx）																																			| `String`/`Number`	| `"auto"`		| -																			| -				|
+| `tabPadding`			| 选项内边距，单位rpx																																			| `String`/`Number`	| `24`				| -																			| -				|
+| `tabSpace`				| 选项间距 （单位rpx）																																			| `String`/`Number`	| `0`					| -																			| -				|
+| `divideNum`				| 标签栏均分最大数量 （设置0则不均分）																											| `Number`					| `4`					| -																			| -				|
+| `sticky`					| 是否开启吸顶																																							| `Boolean`					| `false`			| -																			| -				|
+| `offsetTop`				| 吸顶距离	（单位rpx）																																			| `String`/`Number`	| `0`					| -																			| -				|
+| `swipeable`				| 是否开启手势滑动切换																																			| `Boolean`					| `false`			| -																			| -				|
+| `titleColor`			| 主标题字体颜色和下拉列表中主标题颜色																												| `String`					| `"#000000"`	| -																			| -				|
+| `activeTitleColor`| 激活主标题字体颜色																																				| `String`					| `"#000000"`	| -																			| -				|
+| `subColor`				| 子标题字体颜色和下拉列表中子标题颜色																												| `String`					| `"#000000"`	| -																			| -				|
+| `activeSubColor`	| 激活子标题字体颜色和下拉列表中子标题激活颜色																								| `String`					| `"#ffffff"`	| -																			| -				|
+| `subTitleHeight`	| 子标题高度	（单位rpx）																																		| `String`/`Number`	| `42`				| -																			| -				|
+| `subTitleRadius`	| 子标题圆角	（单位rpx）																																		| `String`/`Number`	| `21`				| -																			| -				|
+| `imageWidth`			| 图片宽度																																									| `String`/`Number`	| `80`				| -																			| -				|
+| `imageHeight`			| 图片高度																																									| `String`/`Number`	| `80`				| -																			| -				|
+| `imageRadius`			| 图片圆角																																									| `String`/`Number`	| `50%`				| -																			| -				|
+| `imageBorderWidth`| 选中图片边框宽度																																					| `String`/`Number`	| `4`					| -																			| -				|
+| `showGapLine`			| 是否显示分割线																																						| `Boolean`					| `false`			| -																			| -				|
+| `lock`						| 是否锁定（无法切换）																																			| `Boolean`					| `false`			| -																			| -				|
+| `disabled`				| 是否禁用（全部功能失效并且置灰）																													| `Boolean`					| `false`			| -																			| -				|
+| `pullDown`				| 是否有下拉选项（当选项数量大于均分数量时生效）																							| `Boolean`					| `false`			| -																			| -				|
+| `placeholder`			| 下拉占位符																																								| `String`					| `"请选择"`		| -																			| -				|
+| `maskTop`					| 下拉蒙层顶部距离																																					| `String`/`Number`	| `0`					| -																			| -				|
+| `maskRight`				| 下拉蒙层右侧距离																																					| `String`/`Number`	| `0`					| -																			| -				|
+| `maskBottom`			| 下拉蒙层底部距离																																					| `String`/`Number`	| `0`					| -																			| -				|
+| `maskLeft`				| 下拉蒙层左侧距离																																					| `String`/`Number`	| `0`					| -																			| -				|
+| `maskZindex`			| 下拉蒙层层级																																							| `Number`					| `1001`			| -																			| -				|
+
+#### Tabs Events
+您可以通过监听`change`事件，事件参数为用户选中标签项的`props`对象，您可以监听该事件获取当前选中的标签。
+|事件名				|说明																						|事件参数				|支持版本	|
+| ---					| ---																						| ---						| ---			|
+| `click-tab`	| 监听tab点击事件，不受`disabled`和`lock`属性影响	| {...tab,index}| -				|
+| `change`		| 监听tab切换																		| {...tab,index}| -				|
+
+#### Tabs Slot
+|插槽名			|说明													|插槽参数	|支持版本	|
+| ---				| ---													| ---			| ---			|
+| `default`	| 默认插槽，请传入`ste-tab`标签列表	| -				| -				|
+
+#### Tabs Method
+|插槽名	|说明								|插槽参数	|支持版本		|
+| ---		| ---								| ---			| ---				|
+| `init`| 数据加载完成后调用	| -				| `v1.13.0`	|
+
+#### Tab Props
+| 属性名					| 说明																																| 类型								| 默认值		| 可选值	|支持版本	|
+| -----						| -----																															| -----							| -----		| -----	| -----		|
+| `title`					| 标题																																| `String`					| -				| -			| -				|
+| `subTitle`			| 子标题																															| `String`					| -				| -			| -				|
+| `image`					| 图片（同image的src属性）																						| `String`					| -				| -			| -				|
+| `name`					| 标签唯一标识（当tabs的active值类型为string时，作为匹配激活的标识符）	| `String`					| -				| -			| -				|
+| `index`					| 标签下标（当tabs的active值类型为number时，作为匹配激活的标识符）			| `Number`					| -				| -			| -				|
+| `disabled`			| 禁用当前标签																												| `Boolean`					| `false`	| -			| -				|
+| `showDot`				| 是否在主标题右上角显示小红点（隐藏主标题时无法显示）									| `Boolean`					| `false`	| -			| -				|
+| `badge`					| 右上角徽标的内容																										| `String`/`Number`	| `0`			| -			| -				|
+| `showZeroBadge`	| 当 badge 为数字 0 时，是否展示徽标																	| `Boolean`					| `false`	| -			| -				|
+
+#### Tab Slot
+|插槽名			|说明																				|插槽参数	|支持版本	|
+| ---				| ---																				| ---			| ---			|
+| `default`	| 默认插槽，在插槽中的内容会展示在标签内容区域	| -				| -				|
+
+
+{{xuyajun}}