1.0.2 • Published 5 years ago
nat-vue-tabs v1.0.2
vue-search
tab标签页
install
NPM
npm install nat-vue-tabs
用法
<template lang="html">
<vue-tabs active-index="1" @clicked="handleClick">
<vue-tab name="tab1">
<p>
这是一个例子这是一个例子这是一个例子这是一个例子
这是一个例子这是一个例子这是一个例子这是一个例子
这是一个例子这是一个例子这是一个例子这是一个例子
这是一个例子这是一个例子这是一个例子这是一个例子
</p>
</vue-tab>
<vue-tab name="tab2">这是tab2</vue-tab>
<vue-tab name="tab3" :isDisabled="true">这是tab3</vue-tab>
</vue-tabs>
</template>
<script>
import {VueTabs, VueTab} from 'nat-vue-tabs';
export default {
name: 'ProjectFeatures',
components: {
VueTabs,
VueTab
},
methods: {
handleClick (value) {
console.log('selected', value);
}
}
};
</script>
也可以这样注册
import VueTabs from 'nat-vue-tabs';
Vue.use(VueTabs);
API
props
tabs
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
activeIndex | 激活的标签页的索引 | string, Number | 0 |
swipeThreshold | 设置标签页超过多少个时,可以滚动 | Number | 4 |
tab
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 标签名称 | string | 空 |
isDisabled | 是否禁用 | boolean | false |
event
tabs
名称 | 说明 | 参数值 |
---|---|---|
clicked | 标签页点击事件 | 当前被点击的标签页的索引(0,1,2...) |
启动
npm run dev
编译
npm run build-lib