更新记录
1.1.0(2024-08-06)
下载此版本
修改文档
1.0.9(2024-08-06)
下载此版本
修改文档
1.0.8(2024-08-06)
下载此版本
增加销毁时,同步修改父组件
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
r-tab
r-tab
选项卡组件,用于在不同的内容区域之间进行切换。该组件为r-tabs的子组件,导入r-tabs即可
示例
<template>
<r-config-provider :themeName="themeName">
<page-header title="标签页"></page-header>
<r-divider content-position="left">基本使用</r-divider>
<r-tabs v-model:active="tabActive" @change="onChange">
<r-tab title="标签 1">内容 1</r-tab>
<r-tab title="标签 2">内容 2</r-tab>
<r-tab title="标签 3">内容 3</r-tab>
<r-tab title="标签 4">内容 4</r-tab>
</r-tabs>
<r-divider content-position="left">通过名称匹配</r-divider>
<r-tabs v-model:active="activeName">
<r-tab title="标签 1" name="a">内容 1</r-tab>
<r-tab title="标签 2" name="b">内容 2</r-tab>
<r-tab title="标签 3" name="c">内容 3</r-tab>
</r-tabs>
<r-divider content-position="left">标签栏滚动 </r-divider>
<r-tabs v-model:active="active">
<r-tab v-for="index in 8" :key="index" :title="'标签 ' + index">
内容 {{ index }}
</r-tab>
</r-tabs>
<r-divider content-position="left">禁用标签 </r-divider>
<r-tabs v-model:active="active">
<r-tab title="标签 1">内容 1</r-tab>
<r-tab title="标签 2" disabled>内容 2</r-tab>
<r-tab title="标签 3">内容 3</r-tab>
</r-tabs>
<r-divider content-position="left">样式风格 </r-divider>
<r-tabs v-model:active="active" type="card" :duration="0">
<r-tab title="标签 1">内容 1</r-tab>
<r-tab title="标签 2">内容 2</r-tab>
<r-tab title="标签 3">内容 3</r-tab>
</r-tabs>
<r-divider content-position="left">收缩布局 </r-divider>
<r-tabs v-model:active="active" shrink>
<r-tab v-for="index in 4" :key="index" :title="'标签 ' + index">
内容 {{ index }}
</r-tab>
</r-tabs>
<r-divider content-position="left">自定义标签 </r-divider>
<r-tabs v-model:active="active">
<template #title="{ item, isActive, index }">
<view
style="
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
"
>
<r-icon :name="index ? 'more-o' : 'gift-o'" color="inherit"></r-icon>
{{ item.title }}
</view>
</template>
<r-tab v-for="index in 2" :title="'标题' + index">
内容 {{ index }}
</r-tab>
</r-tabs>
</r-config-provider>
</template>
<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const activeName = ref("a");
const tabActive = ref(0);
const active = ref(0);
const onChange = (e) => {
console.log("e", e);
};
</script>
API
Tabs Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
active |
绑定当前选中标签的标识符 |
Number|String |
0 |
- |
type |
样式风格类型 |
String |
line |
card |
color |
标签主题色 |
String |
#1989fa |
|
background |
标签栏背景色 |
String |
var(--r-tabs-nav-background) |
|
duration |
动画时间,单位毫秒 |
Number |
300 |
|
lineWidth |
底部条宽度 |
String |
80rpx |
|
lineHeight |
底部条高度 |
String |
6rpx |
|
animated |
是否开启切换标签内容时的转场动画 |
Boolean |
false |
|
border |
是否显示标签栏外边框,仅在 type="line" 时有效 |
Boolean |
false |
|
ellipsis |
是否省略过长的标题文字 |
Boolean |
true |
|
sticky |
是否使用粘性布局 |
Boolean |
false |
|
shrink |
是否开启左侧收缩布局 |
Boolean |
false |
|
swipeThreshold |
滚动阈值,标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 |
Number |
5 |
|
beforeChange |
切换标签前的回调函数,返回 false 可阻止切换,支持返回 Promise |
Function |
|
|
themeName |
r-theme 的主题 |
String |
default |
|
Tab Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
title |
标题 |
String |
- |
- |
dot |
是否在标题右上角显示小红点 |
Boolean |
false |
true |
disabled |
是否禁用标签 |
Boolean |
false |
true |
badge |
图标右上角徽标的内容 |
String |
|
|
name |
标签名称,作为匹配的标识符 |
String | Number |
|
|
showZeroBadge |
当 badge 为数字 0 时,是否展示徽标 |
Boolean |
true |
|
themeName |
r-theme 的主题名称 |
String |
default |
|
Tabs Slots
名称 |
说明 |
参数 |
title |
title 处插槽 |
item |
navLeft |
nav 左侧 |
- |
navRight |
nav 右侧 |
- |
navBottom |
nav 下侧 |
- |
default |
默认插槽 |
|
Tabs Events
名称 |
说明 |
回调参数 |
update:active |
当前激活的标签改变时触发 |
name |
change |
当前激活的标签改变时触发 |
name,title |
rendered |
标签内容首次渲染时触发 |
name,title |
clickTab |
点击标签时触发 |
{ name,title,event,disabled } |
更多组件,请前往rainui