vue-tabbar-slide

A Vue.js Slide Tab-bar

Install

npm install vue-tabbar-slide -S

How To Use

//main.js
import Vue from 'vue'
import vueTabbarSlide from 'vue-tabbar-slide'

Vue.use(vueTabbarSlide)

  <!-- app.vue -->
  <template>
    <div id="app">
      <vue-tabbar-slide :options="options" @callback="callback"></vue-tabbar-slide>

      <div @click="getData">点击获取数据</div>
      <div @click="getData1">点击更改数据</div>
    </app>
  </template>

  <script>
    export default {
      name: 'app',
      data () {
        return {
          options: {
            //required(必填项)
            container: 'mySlide1',
            slideData: [],
              //用来传递data-id
            slideId: [],
            //optional(可选项)
            width: '80px',
            index: 1
          },
        }
      },
      methods: {
        getData () {
          this.options.slideData = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9', 'data10']
          this.options.slideId = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        },
        getData1 () {
          this.options.slideData = ['data11', 'data21', 'data31', 'data41', 'data51', 'data61']
          this.options.slideId = ['11', '21', '31', '41', '51', '61', '71', '81', '91', '101']
        },
        callback (event, index, val, id) {
          console.log(`callback=${index},${val},${id}`)
        }
      }
    }
  </script>

options

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | required | | container | String | --- | container name | | slideData | Array | --- | data | | slideId | Array | --- | data-id | | optional | | index | Number | 0 | default index | | width | String | 80px | slide width | | height | String | 40px | slide height | | textAlign | String | center | text-align | | fontSize | String | 14px | font-size | | fontFamily | String | Microsoft YaHei | font-family | | color | String | #333 | font-color | | checkedColor | String | #00a0e9 | checked-color | | downLineHeight | String | 2px | underline height | | downLineColor | String | #00a0e9 | underline color |

update

Solve the problem when the number of slide is insufficient

Extension usage

you can use it to make a N-linkage and so on

####### if you find some questions, please contact me!

[email protected]

if you like it, show me your star, thanks very much