打印/下载
参数
Vue案例
小程序案例

参数

  • v-model: (Boolean) 默认菜单, 默认: 0
  • list: (Array) 菜单列表, 默认: []
  • num: (Numbar) 最大显示数量, 默认: 4

事件

  • change: (event) 点击时触发, 返回: [key,val]

引入

import Tab from '@/components/tab'
Vue.component('wm-tab',Tab);

Html

<wm-tab
  :list="demoClass.list"
  v-model="demoClass.active"
  @change="demoChange"
  style="height: 50px;">
</wm-tab>

JavaScript

export default {
  data(){
    return {
      demoClass: {
        active:0,
        list:[
          {name:'WebMIS',val:'webmis'},
          {name:'Phalcon',val:'phalcon'},
          {name:'Flutter',val:'flutter'},
          {name:'Linux',val:'linux'},
        ]
      },
    }
  },
  methods:{

    /* 监听滚动 */
    demoChange(res){
      console.log(res);
    },

  },
}

引入

{
  "usingComponents": {
    "wm-tab": "/components/tab/index",
  },
  "navigationStyle": "custom"
}

Html

<wm-tab
  list="demoClass.list"
  active="demoClass.active"
  bind:change="demoChange"
  style="height: 50px;">
</wm-tab>

JavaScript

import store from '../../store'
import create from '../../libray/store/create'

create(store,{
  data:{
    demoClass: {
      active:0,
      list:[
        {name:'WebMIS',val:'webmis'},
        {name:'Phalcon',val:'phalcon'},
        {name:'Flutter',val:'flutter'},
        {name:'Linux',val:'linux'},
      ]
    },
  },

  /* 监听滚动 */
  demoChange(res){
    console.log(res);
  },

});
{{copy}}