更新记录

1.1.0(2024-08-06) 下载此版本

修改文档

1.0.9(2024-08-06) 下载此版本

修改文档

1.0.8(2024-08-06) 下载此版本

增加销毁时,同步修改父组件

查看更多

平台兼容性

Vue2 Vue3
×
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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问