插件名称 | vue-tabs-with-active-line |
---|---|
发布时间 | 2020年7月19日 |
插件作者 | karambafe |
通过NPM
npm install vue-tabs-with-active-line --save
导入组件
import Tabs from 'vue-tabs-with-active-line';
定义 props 数据tabs
,currentTab
用于和方法onClick
回调
export default {
components: {
Tabs,
},
data: () => ({
tabs: [
{ title: 'Tab 1', value: 'tab1' },
{ title: 'Tab 2', value: 'tab2' },
{ title: 'Tab 3', value: 'tab3', }
],
currentTab: 'tab1',
}),
methods: {
handleClick(newTab) {
this.currentTab = newTab;
},
},
}
</script>
这是根据输入的数据生成的HTML结构:
<nav class="tabs">
<button class="tabs__item tabs__item_active"> Tab 1 </button> <!-- active tab -->
<button class="tabs__item"> Tab 2 </button>
<button class="tabs__item"> Tab 3 </button>
<div class="tabs__active-line"></div>
</nav>
为组件元素添加一些样式:
.tabs
-组件包装.tabs__item
-按钮.tabs__item_active
-活动按钮.tabs__active-line
-底线一定要加 position: relative;
的.tabs
班
并position: absolute;
带有类的bottom, left, height, background-color
属性.tabs__active-line
Props | 类型 | 需要 | 描述 |
---|---|---|---|
tabs | Array | true | 描述 |
currentTab | String | true | 活动标签值 |
onClick | Function | true | 单击时返回新的选项卡值 |
updated | Boolean/String/Array | false | 自定义更新活动行的道具 |
wrapperClass | String | false | 容器的自定义类 |
tabClass | String | false | 选项卡项目的自定义类 |
tabActiveClass | String | false | 活动标签项目的自定义类别 |
lineClass | String | false | 活动线路的自定义类别 |