Tabs 标签页
引入组件
<template>
<m-tabs :selected.sync="selected">
<m-tabs-head>
<m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
<m-tabs-item name="idol">偶像</m-tabs-item>
<m-tabs-item name="inference">推理</m-tabs-item>
</m-tabs-head>
<m-tabs-body>
<m-tabs-pane name="dayToDay">今日的风儿好喧嚣啊 </m-tabs-pane>
<m-tabs-pane name="idol">为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!</m-tabs-pane>
<m-tabs-pane name="inference">赌上爷爷的名义</m-tabs-pane>
</m-tabs-body>
</m-tabs>
</template>
<script>
import { MTabs, MTabsHead, MTabsBody, MTabsItem, MTabsPane } from "@csr/m_ui";
export default {
components: {
MTabs,
MTabsHead,
MTabsBody,
MTabsItem,
MTabsPane
},
data() {
return {
selected: 'dayToDay'
}
}
}
</script>
基础用法
今日的风儿好喧嚣啊
为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!
赌上爷爷的名义
代码
<m-tabs :selected.sync="selected">
<m-tabs-head>
<m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
<m-tabs-item name="idol">偶像</m-tabs-item>
<m-tabs-item name="inference">推理</m-tabs-item>
</m-tabs-head>
<m-tabs-body>
<m-tabs-pane name="dayToDay">
<p>今日的风儿好喧嚣啊</p>
</m-tabs-pane>
<m-tabs-pane name="idol">
<p>为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!</p>
</m-tabs-pane>
<m-tabs-pane name="inference">
<p>赌上爷爷的名义</p>
</m-tabs-pane>
</m-tabs-body>
</m-tabs>
<script>
export default {
data() {
return {
selected: 'dayToDay'
}
}
}
</script>
自定义选项卡
代码
<m-tabs :selected.sync="selected">
<m-tabs-head>
<m-tabs-item name="dayToDay">
<m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-dog"></use></svg></m-icon>
搞笑/日常
</m-tabs-item>
<m-tabs-item name="idol">
<m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-tv"></use></svg></m-icon>
偶像
</m-tabs-item>
<m-tabs-item name="inference">
<m-icon><svg class="icon-font" aria-hidden="true"><use xlink:href="#icon-baozou"></use></svg></m-icon>
推理
</m-tabs-item>
</m-tabs-head>
<m-tabs-body>
<m-tabs-pane name="dayToDay">今日的风儿好喧嚣啊 </m-tabs-pane>
<m-tabs-pane name="idol">为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!</m-tabs-pane>
<m-tabs-pane name="inference">赌上爷爷的名义</m-tabs-pane>
</m-tabs-body>
</m-tabs>
<script>
export default {
data() {
return {
selected: 'dayToDay'
}
}
}
</script>
禁用选项卡
今日的风儿好喧嚣啊
为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!
赌上爷爷的名义
代码
<m-tabs :selected.sync="selected">
<m-tabs-head>
<m-tabs-item name="dayToDay">搞笑/日常</m-tabs-item>
<m-tabs-item name="idol" disabled>偶像</m-tabs-item>
<m-tabs-item name="inference">推理</m-tabs-item>
</m-tabs-head>
<m-tabs-body>
<m-tabs-pane name="dayToDay">
<p>今日的风儿好喧嚣啊</p>
</m-tabs-pane>
<m-tabs-pane name="idol">
<p>为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!</p>
</m-tabs-pane>
<m-tabs-pane name="inference">
<p>赌上爷爷的名义</p>
</m-tabs-pane>
</m-tabs-body>
</m-tabs>
<script>
export default {
data() {
return {
selected: 'dayToDay'
}
}
}
</script>
超多选项卡
今日的风儿好喧嚣啊
为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!
赌上爷爷的名义
在虚构的故事当中寻求真实感的人脑袋一定有问题
只要打不中就没有什么大不了
没有人能在我的BGM里打败我
教练,我想打篮球
和我签订契约,成为魔法少女吧
我不是萝莉控,只是喜欢的人刚好是萝莉而已!
代码
<m-tabs :selected.sync="selected">
<m-tabs-head>
<m-tabs-item v-for="item in tablist" :key="item.id" :name="item.name">
{{ item.title }}
</m-tabs-item>
</m-tabs-head>
<m-tabs-body>
<m-tabs-pane v-for="item in tablist" :key="item.id" :name="item.name">
<p>{{ item.content }}</p>
</m-tabs-pane>
</m-tabs-body>
</m-tabs>
<script>
export default {
data() {
return {
selected: 'dayToDay',
tablist: [
{ id: 1, name: 'dayToDay', title: '搞笑/日常', content: '今日的风儿好喧嚣啊'},
{ id: 2, name: 'idol', title: '偶像', content: '为了保护心爱的学园都市,科学家们决定让七名LV5站出来……成为偶像!'},
{ id: 3, name: 'inference', title: '推理', content: '赌上爷爷的名义'},
{ id: 4, name: 'love', title: '恋爱/情感', content: '在虚构的故事当中寻求真实感的人脑袋一定有问题'},
{ id: 5, name: 'machineWar', title: '机战', content: '只要打不中就没有什么大不了'},
{ id: 6, name: 'blood', title: '热血/冒险', content: '没有人能在我的BGM里打败我'},
{ id: 7, name: 'sports', title: '体育/棋牌', content: '教练,我想打篮球'},
{ id: 8, name: 'magicalGirl', title: '魔法少女', content: '和我签订契约,成为魔法少女吧 '},
{ id: 9, name: 'game', title: '游戏台词', content: ' 我不是萝莉控,只是喜欢的人刚好是萝莉而已!'}
]
}
}
}
</script>
API
MTabs
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
selected | 选中的选项卡name,必传。可以使用.sync修饰符 | string | number |
MTabsItem
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 选项卡标识,必传,该属性的值唯一。 | string | number | |
disable | 是否禁用 | boolean | false |
MTabsPane
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 面板标识,和对应的选项卡name相同 | string | number |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
on-click | 点击选项卡时触发 | (name: string | number) |
update:selected |
选项卡选中时触发
<m-tabs :selected.sync="selected">...</m-tabs>
<m-tabs :selected="selected" @update:selected="selected = $event">...</m-tabs>
| (name: string | number) |