标签、选项卡 Tabs
标签、选项卡组件。
[!ERROR] 重要提示 飞书小程序
scroll-view横向滚动模拟器上测试的是无法滚动，真机可以。
兼容性
- 兼容：✅
- 不兼容：❌
- 未知：❔
| H5 | 安卓 | 苹果 | 微信 | 支付宝 | 百度 | 抖音 | 快手 | 飞书 | 京东 | |
|---|---|---|---|---|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 小红书 | 鸿蒙 | 360 | 华为快应用 | 快应用联盟 |
|---|---|---|---|---|
| ✅ | ❔ | ❔ | ❔ | ❔ |
插件市场地址
基础使用
- 默认激活项居中。
- 需结合
pure-tabs-item组件使用。 - 通过
value绑定激活项的值。 - 需给
pure-tabs-item设置item和value属性。 - 通过监听
pure-tabs的tabClick事件或pure-tabs-item的onClick事件获取到点击项的数据后手动更新pure-tabs绑定的value值来实现切换选项卡。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick">
<pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>
<script>
import { ref } from "vue";
// tabs
const tabs = ref([
{ name: "前端", value: 1 },
{ name: "后端", value: 2 },
{ name: "Java", value: 3 },
{ name: "PHP", value: 4 },
{ name: "Python", value: 5, disabled: true },
{ name: "Vue", value: 6 },
{ name: "React", value: 7 },
{ name: "CSS", value: 8 },
{ name: "HTML", value: 9 },
{ name: "JavaScript", value: 10 },
{ name: "C", value: 11, disabled: true },
{ name: "C++", value: 12 },
{ name: "C#", value: 13 },
]);
const tabValue = ref(4);
// Tab点击事件
function handleTabClick(item) {
console.log("Tab点击事件", item);
// 更新绑定值
tabValue.value = item.value;
}
</script>贴边吸附
- 给
pure-tabs添加edge属性开启。 - 开启后激活项会自动贴边吸附到最左/顶部。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" edge>
<pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>只滚动到可见
- 给
pure-tabs添加visible属性开启。 - 只讲激活项滚动到可见状态，表现为靠左/顶或者靠右/底。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" visible>
<pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>禁用选项卡
- 给
pure-tabs-item添加disabled属性即可禁用该项。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick">
<pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value" :disabled="tab.disabled">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>禁止滚动
- 给
pure-tabs添加disabled属性开启。 - 禁止滚动后
items宽度将会变为100%。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled>
<pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>等分布局
- 通过添加辅助类
pure-tabs-equal实现。 - 一般需结合
disable禁止滚动使用。
提示
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-equal">
<pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>两端对齐
- 通过添加辅助类
pure-tabs-justify实现。 - 一般需结合
disable禁止滚动使用。
提示
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-justify">
<pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>换行布局
- 通过添加辅助类
pure-tabs-wrap实现。 - 一般需结合
disable禁止滚动使用。
提示
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" disabled class="pure-tabs-equal pure-tabs-wrap">
<pure-tabs-item v-for="(tab, index) in tabs.slice(0, 4)" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>纵向布局
- 给
pure-tabs添加vertical属性开启。
vue
<template>
<pure-tabs :value="tabValue" @tabClick="handleTabClick" vertical>
<pure-tabs-item v-for="(tab, index) in tabs" :key="tab.value" :item="tab" :value="tab.value">
<text class="item">{{ tab.name }}</text>
</pure-tabs-item>
</pure-tabs>
</template>Props
pure-tabs
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
hoverClass | 给所有子项设置 hover-class，同 view 的 hover-class | String | "pure-hover" | - | +1.0.0 |
value | 激活项的值 | [Number, String] | null | - | +1.0.0 |
animation | 是否开启滚动动画 | Boolean | true | false | +1.0.0 |
disabled | 是否禁止滚动 | Boolean | false | true | +1.0.0 |
vertical | 纵向布局 | Boolean | false | true | +1.0.0 |
edge | 自动贴边 | Boolean | false | true | +1.0.0 |
visible | 只将激活项滚动到可视区域 | Boolean | false | true | +1.0.0 |
disabledClass | 给所有子项设置禁用时的类名 | String | pure-disabled | - | +1.0.0 |
pure-tabs-item
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 版本 |
|---|---|---|---|---|---|
hoverClass | 给子项单独设置 hover-class，同 view 的 hover-class | String | "" | - | +1.0.0 |
item | 子项数据 | Object | null | - | +1.0.0 |
value | 子项的值 | [Number, String] | "" | - | +1.0.0 |
disabled | 是否禁用该子项 | Boolean | false | true | +1.0.0 |
disabledClass | 子项禁用时的类名 | String | - | - | +1.0.0 |
Event
pure-tabs
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
tabClick | 选项点击事件 | item: 选项数据 | +1.0.0 |
pure-tabs-item
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
onClick | 选项点击事件 | item: 选项数据 | +1.0.0 |
Expose
pure-tabs
| 方法 | 说明 | 参数 | 版本 |
|---|---|---|---|
init | 初始化函数，组件异常时可使用此函数重新初始化 | - | +1.0.0 |
Slots
pure-tabs
| 名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
default | 默认，通常放 pure-tabs-item 组件 | - | +1.0.0 |
pure-tabs-item
| 名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
default | 默认 | - | +1.0.0 |