crm-app-vue3/uni_modules/yui-tabs

yui-tabs 关于标签页组件

• Tips
• 支持的平台
• 使用示例
• Tabs Props
• Tabs Events
• Tabs Slots

Tips

• 请保证HBuilderX版本为 3.5.0 alpha，不然动态插槽名在app-vue上无效。
• 该插件使用的预编译，需要自行安装less插件。
• 如果发现组件有bug或者不完善可以留言交流。
• 测试demo请移步git地址：https://github.com/chenduyy/yui-demo
• 最新的代码请下载示例项目ZIP,在项目的components/yui-tabs下，插件ZIP并非最新的代码

支持的平台：

• H5、app-vue、微信、支付宝、钉钉小程序可用，其他的小程序平台可自行测试。
• 暂不支持nvue。

使用示例：

<template>
 <view>
	 <yui-tabs :tabs="tabs" v-model="activeIndex" @click="tabClick" @change="tabChange">
		<template #pane0>
			<view class="content-wrap">内容1</view>
		</template>
		<template #pane1>
			<view class="content-wrap">内容2</view>
		</template>
		<template #pane2>
			<view class="content-wrap">内容3</view>
		</template>
		<template #pane3>
			<view class="content-wrap">内容4</view>
		</template>
		<template #pane4>
			<view class="content-wrap">内容5</view>
		</template>
	 </yui-tabs>
 </view>
</template>
<script>
	import yuiTabs from '@/components/yui-tabs/index'
	export default {
		components: {
			yuiTabs,
		},
		data() {
			return {
				tabs: Array.from({
					length: 5
				}, (o, i) => `标签${i+1}`),
				activeIndex: 0,
			}
		},
		methods: {
			// 标签点击事件
			tabClick(index, item) {
				console.log("tabClick", index, item);
			},
			// 标签切换事件
			tabChange(index, item) {
				console.log("tabChange", index, item);
			}
		}
	}
</script>

Tabs Props

参数	类型	描述	默认值
v-model	string	绑定当前选中标签的标识符（即tabs中选中项的下标）	0
tabs	[stirng,object]	标签页数据，支持字符串类型与对象类型的数组结构(对象类型需符合{label:'标签1',slot:'slotName'}这样的格式，slot为自定义的标签内容插槽名，否则插槽名默认为"pane"+tab下标的命名)	-
color	string	标签主题色	#0022AB
background	string	标签栏背景色	#fff
title-active-color	string	标题选中态颜色	-
title-inactive-color	string	标题默认态颜色	-
duration	number、string	动画时间，单位秒	0.3
line-width	number、string	底部条宽度，默认单位 px	20px
line-height	number、string	底部条高度，默认单位 px	3px
animated	boolean	是否开启切换标签内容时的转场动画	false
ellipsis	boolean	是否省略过长的标题文字,标签数量未超过导航标签滚动阈值时才生效	true
swipeable	boolean	是否开启手势滑动切换	false
is-lazy-render	boolean	是否开启延迟渲染（首次切换到标签时才触发内容渲染）	true
swipeThreshold	number、string	导航标签滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动	5
scrollThreshold	number、string	滚动阈值，手指滑动页面触发切换的阈值,单位为px，表示横向滑动整个可视区域的多少px时才切换标签内容	50
visible	boolean	标签栏可见性，结合fixed使用，用于模拟滚动吸顶	true
fixed	boolean	标签页是否滚动吸顶	false
offset-top	number	滚动吸顶下与顶部的最小距离，默认 px	0
z-index	number	滚动吸顶下，标签栏的z-index值	99

Tabs Events

事件名	说明	回调参数
click	点击标签时触发	index:下标；item：当前点击的tab项
change	当前激活的标签改变时触发	index:下标；item：当前改变的tab项

Tabs Slots

| 名称 | 说明 | --------- | ------- | extra | 标签栏右侧额外内容 | pane+下标 | 标签内容插槽，否则插槽名默认为"pane"+tab下标的命名，如果tabs中通过slot设置了插槽名，则是slot中的命名