uView Tabs 标签页

发布时间:2024年01月07日

分隔内容上有关联但属于不同类别的数据集合。

基础用法#

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能, 默认选中第一个标签页,你也可以通过?value?属性来指定当前选中的标签页。

User

Config

Role

Task

User

卡片风格的标签#

你可以设置具有卡片风格的标签。

只需要设置?type?属性为?card?就可以使选项卡改变为标签风格。

User

Config

Role

Task

User

带有边框的卡片风格#

你还可以设置标签页为带有边框的卡片

将?type?设置为?border-card

User

Config

Role

Task

User

标签位置的设置#

可以通过?tab-position?设置标签的位置

标签一共有四个方向的设置?tabPosition="left|right|top|bottom"

toprightbottomleft

User

Config

Role

Task

User

自定义标签页的内容#

可以通过具名插槽来实现自定义标签页的内容

Route

Config

Role

Task

Route

动态增减标签页#

增减标签页按钮只能在选项卡样式的标签页下使用

Tab 1

Tab 2

Tab 2 content

添加按钮自定义图标2.4.0#

Tab 1

Tab 2

Tab 2 content

增加标签页触发器自定义#

add tab

Tab 1

Tab 2

Tab 2 content

Tabs 属性#

属性名说明类型可选值默认值
model-value / v-model绑定值,选中选项卡的 namestring / number第一个选项卡的 name
type风格类型stringcard/border-card
closable标签是否可关闭booleanfalse
addable标签是否可增加booleanfalse
editable标签是否同时可增加和关闭booleanfalse
tab-position选项卡所在位置stringtop/right/bottom/lefttop
stretch标签的宽度是否自撑开boolean-false
before-leave切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换。Function(activeName, oldActiveName)

Tabs 事件#

事件名说明回调参数
tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)
tab-changeactiveName 改变时触发(name: TabPaneName)
tab-remove点击 tab 移除按钮时触发(name: TabPaneName)
tab-add点击 tab 新增按钮时触发
edit点击 tab 的新增或移除按钮后触发(paneName: TabPaneName | undefined, action: 'remove' | 'add')

Tabs 插槽#

插槽名说明子标签
-默认插槽Tab-pane
addIcon 2.4.0自定义添加按钮图标-

Tab-pane 属性#

属性名说明类型可选值默认值
label选项卡标题string
disabled是否禁用booleanfalse
name与选项卡绑定值 value 对应的标识符,表示选项卡别名string / number该选项卡在选项卡列表中的序数值,第一个选项卡为 '0'
closable标签是否可关闭booleanfalse
lazy标签是否延迟渲染booleanfalse

Tab-pane 插槽#

插槽名说明
-Tab-pane 的内容
labelTab-pane 的标题内容
文章来源:https://blog.csdn.net/m0_72196169/article/details/135443223
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。