选项卡

选项卡组件。

基础使用

• 通过 list 属性设置选项卡数据。
• 通过 current 属性设置当前选中的选项卡索引。

<template>
	<pure-tabs :list="list" :current="current" label-key="text" @onClick="handleClick"></pure-tabs>
</template>

<script setup>
import { ref } from "vue";

// 选项卡数据列表
const list = ref([
	// 选项卡数据项
	// 选项卡默认展示数据项中的 label 字段对应的文本，可以通过 label-key 属性指定要展示的字段名称
	{ text: "日常", name: "tab1" },
	{ text: "水果", name: "tab2" },
	{ text: "家电", name: "tab3" },
]);
const current = ref(0);

// 选项卡数据项点击事件处理函数
// index: 选项卡数据项的索引
// item: 选项卡数据项
function handleClick(index, item) {
	current.value = index;
}
</script>

自动居中

组件默认会将激活项居中展示。

吸附模式

将 sticky 属性设置为 true 开启吸附模式。
此模式，激活项会自动滚动到容器的最左侧。

可视模式

将 visible 属性设置为 true 开启可视模式。
此模式，激活项会自动将激活项滚动到可见状态。

等分布局

将 equal 属性设置为 true 开启等分布局样式，开启后：

• 选项卡无法滚动。
• 每个选项卡占用的宽度相同，等同于 flex-grow: 1; flex-shrink: 0;

两端对齐布局

将 justify 属性设置为 true 开启两端对齐布局样式，开启后：

• 选项卡无法滚动。
• 等同于 justify-content: space-between;

禁止滚动

将 disabled 属性设置为 true 即可禁止选项卡滚动。

<template>
	<pure-tabs :list="list" :current="current" disabled></pure-tabs>
</template>

禁用选项

如果选项数据中有 disabled 字段，且值为 true，则该选项卡将被禁用，无法触发 onClick 事件。

<template>
	<pure-tabs :list="list" :current="current" @onClick="handleClick"></pure-tabs>
</template>

<script setup>
import { ref } from "vue";

// 选项卡数据列表
const list = ref([
	// 选项卡数据项
	{ label: "日常", name: "tab1" },
	// 该选项将会被禁用，无法触发点击事件
	{ label: "水果", name: "tab2", disabled: true },
	{ label: "家电", name: "tab3" },
]);
const current = ref(0);

// 选项卡数据项点击事件处理函数
// index: 选项卡数据项的索引
// item: 选项卡数据项
function handleClick(index, item) {
	current.value = index;
}
</script>

纵向布局

• 将 vertical 属性设置为 true 开启纵向布局样式。

提示

纵向布局时组件高度默认 100%。

<template>
	<view style="height: 200px;">
		<pure-tabs :list="list" :current="current" vertical @onClick="handleClick"></pure-tabs>
	</view>
</template>

<script setup>
import { ref } from "vue";

// 选项卡数据列表
const list = ref([
	// 选项卡数据项
	{ label: "日常", name: "tab1" },
	{ label: "水果", name: "tab2" },
	{ label: "家电", name: "tab3" },
	// ...
]);
const current = ref(0);
</script>

自定义指示器

通过 indicator 插槽自定义指示器。

<template>
	<!-- 自定义指示器时一般还需配合将默认指示条隐藏掉，否则会显示多个指示器 -->
	<!-- 通过 :show-bar="false" 隐藏默认指示条 -->
	<pure-tabs :list="list" :current="current" :show-bar="false" @onClick="handleClick">
		<!-- activated：当前选项卡是否被激活 -->
		<!-- item：当前选项卡的数据项 -->
		<!-- index：当前选项卡的数据项的索引 -->
		<template #indicator="{ activated, item, index }">
			<image class="indicator" :class="activated ? 'active' : ''" src="/static/images/a_002.png" mode="widthFix" style="width: 1em" />
		</template>
	</pure-tabs>
</template>

<script setup>
import { ref } from "vue";

// 选项卡数据列表
const list = ref([
	{ label: "日常", name: "tab1" },
	{ label: "水果", name: "tab2" },
	{ label: "家电", name: "tab3" },
]);
const current = ref(0);

// 选项卡数据项点击事件处理函数
// index: 选项卡数据项的索引
// item: 选项卡数据项
function handleClick(index, item) {
	current.value = index;
}
</script>

<style scoped lang="scss">
// 自定义指示器样式
// 指示器默认显示在最下方
.indicator {
	width: 1em;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%) scale(0);
	opacity: 0;
	transition: all 0.3s ease-in-out;

	&.active {
		transform: translate(-50%, 0) scale(1);
		opacity: 1;
	}
}

主题

通过 theme 属性设置选项卡主题，主题样式只应用到激活项上。

<template>
	<pure-tabs theme="primary" :list="list" :current="current"></pure-tabs>
	<pure-tabs theme="success" :list="list" :current="current"></pure-tabs>
	<pure-tabs theme="warning" :list="list" :current="current"></pure-tabs>
	<pure-tabs theme="error" :list="list" :current="current"></pure-tabs>
	<pure-tabs theme="info" :list="list" :current="current"></pure-tabs>
</template>

幽灵样式

通过 ghost 属性设置选项卡幽灵样式，幽灵样式只应用到激活项上。

<template>
	<pure-tabs ghost theme="primary" :list="list" :current="current"></pure-tabs>
	<pure-tabs ghost theme="success" :list="list" :current="current"></pure-tabs>
	<pure-tabs ghost theme="warning" :list="list" :current="current"></pure-tabs>
	<pure-tabs ghost theme="error" :list="list" :current="current"></pure-tabs>
	<pure-tabs ghost theme="info" :list="list" :current="current"></pure-tabs>
</template>

镂空样式

通过 plain 属性设置选项卡镂空样式，镂空样式只应用到激活项上。

<template>
	<pure-tabs plain theme="primary" :list="list" :current="current"></pure-tabs>
	<pure-tabs plain theme="success" :list="list" :current="current"></pure-tabs>
	<pure-tabs plain theme="warning" :list="list" :current="current"></pure-tabs>
	<pure-tabs plain theme="error" :list="list" :current="current"></pure-tabs>
	<pure-tabs plain theme="info" :list="list" :current="current"></pure-tabs>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
list	Array		选项卡数据列表
current	Number		激活项的索引
labelKey	String	label	显示文本对应的字段名称
vertical	Boolean	false	垂直方向布局
showBar	Boolean	false	是否显示指示条，注意，此配置只影响默认的指示条，自定义指示器不受影响
sticky	Boolean	false	是否开启吸附模式
visible	Boolean	false	是否开启可视模式
disabled	Boolean	false	是否禁止滚动
equal	Boolean	false	是否等分布局
justify	String	center	是否两端对齐布局
animation	Boolean	true	滚动时是否使用动画
theme	String		主题
ghost	Boolean	false	幽灵样式
plain	Boolean	false	镂空样式
bold	[String, Number]	700	激活项字体加粗值

事件

名称	参数	说明
onClick	index: 数据索引; item: 数据项数据	选项点击事件

插槽

名称	参数	说明
#left		左侧固定内容
#indicator	index: 选项索引; item: 选项数据; activated: 选项是否被激活;	自定义指示器
#bar		默认指示条
#right		右侧固定内容

样式变量

名称	说明
--pure-tabs-text-align	组件文本对齐方式
--pure-tabs-background	组件背景
--pure-tabs-width	组件宽度
--pure-tabs-height	组件高度
--pure-tabs-content-padding	组件主内容（选项卡部分）内边距
--pure-tabs-items-padding	组件主内容（选项卡部分）内边距
--pure-tabs-items-gap	选项之间间距
--pure-tabs-item-padding	选项内边距
--pure-tabs-item-margin	选项外边距
--pure-tabs-item-flex-direction	选项 flex 布局方向
--pure-tabs-item-align-items	选项 flex 布局 align-items 对齐方式
--pure-tabs-item-justify-content	选项 flex 布局 justify-content 对齐方式
--pure-tabs-item-transition	选项过渡效果
--pure-tabs-item-background-default-transform	未激活选项背景的变换方式
--pure-tabs-item-background-default-opacity	未激活选项背景的透明度
--pure-tabs-item-background-default-transition	未激活选项背景的过渡效果
--pure-tabs-item-active-color	激活项文本颜色
--pure-tabs-item-active-font-size	激活项字体大小
--pure-tabs-item-active-font-weight	激活项字体粗细
--pure-tabs-item-active-background	激活项背景
--pure-tabs-item-active-background-opacity	激活项背景透明度
--pure-tabs-item-active-background-transform	激活项背景变换方式
--pure-tabs-item-active-background-opacity	激活项背景透明度
--pure-tabs-item-disabled-opacity	禁用项透明度
--pure-tabs-item-disabled-font-size	禁用项字体大小
--pure-tabs-item-disabled-color	禁用项文本颜色
--pure-tabs-item-disabled-background	禁用项背景
--pure-tabs-item-disabled-font-weight	禁用项字体粗细
--pure-tabs-bar-background	指示条背景
--pure-tabs-bar-border-radius	指示条圆角大小
--pure-tabs-bar-bottom	指示条定位位置
--pure-tabs-bar-left	指示条定位位置
--pure-tabs-bar-width	指示条宽度
--pure-tabs-bar-height	指示条高度
--pure-tabs-bar-transform	指示条变换方式