本文实例为大家分享了vue插件tab选项卡的使用方法，供大家参考，具体内容如下
基本用法
<template>
<tab :options="tabOpt" :state.sync="stateIndex"></tab>
</template>
<script type="text/babel">
import tab from 'components/tab_touch';
export default {
data(){
tabOpt:undefined,
stateIndex:0
},
components:{
"tab":tab
},
ready(){
this.tabOpt={
count: 2.3,
pin:true,
htmls:[
"<span>白日登山</span>",
"<span>望烽火</span>",
"<span>黄昏饮马</span>",
"<span>傍交河</span>",
"<span>行人刁斗</span>",
"<span>风沙暗</span>",
"<span>公主琵琶</span>",
"<span>幽怨多</span>",
"<span>野营万里</span>",
"<span>无城郭</span>",
"<span>雨雪纷纷</span>",
"<span>连大漠</span>"
],
slideCallback:function (dex) {
console.log(dex);
},
tabClassName:"tab",
tabActiveClassName: "active"
}
}
}
</script>options参数释义
代码
tab.vue
<template>
<div class="fixWrap">
<div class="component-tabsWrap" :id="tabsWrapID"
v-touch:pan="onPan">
<div class="component-tabs" :style="wrapStyle">
<div class="component-tab" v-for="item in options.htmls" track-by="$index" :style="'width:'+tWidth+'px'"
@click.stop="this.state=$index"
:class="[options.tabClassName,$index==state?options.tabActiveClassName:'']">
{{{item}}}
</div>
</div>
</div>
</div>
</template>
<style lang="sass" rel="stylesheet/sass">
@import "tab.sass"
</style>
<script lang="babel" type="text/babel">
var VueTouch = require ('vue-touch');
Vue.use (VueTouch);
import requestAnimFrame from "utils/requestAnimFrame"
const sign = (num)=> {
return num >= 0 ? 1 : -1
}
export default {
props: ["options", "state"],
data(){
return {
tabsWrapID: undefined,//外容器ID
wrapWidth: "", //外容器宽度
tWidth: 0, //每一个选项卡应该有多宽
width: 0, //宽度。
startTransX: 0,
transX: 0, //元素样式偏移。
cssX: 0 //动作中css实际完成的偏移。
}
},
methods: {
init(){
this.wrapWidth = document.getElementById (this.tabsWrapID).offsetWidth;
this.tWidth = this.wrapWidth / this.options.count;
this.width = this.tWidth * this.options.htmls.length;
