vue-tabslider vue tab滑动切换插件

vue-tabslider

npm

 
# npm install
npm install vue-tabslider --save

引入

在main.js中引入

 import vueTabslider from './index.js'
Vue.use(vueTabslider)

使用

vue tab滑动插件

• 使用时需要给vue-tabslider设置一个宽度和高度

   <vue-tabslider
      :duration="300"
      :position="'top'"
      :title="titleData"
      :titleStyles="titleStyles"
      :activeStyle="activeStyle"
      :titleBoxStyles="titleBoxStyles"
        style="width:100vw;height:100vh;">
  </vue-tabslider>

参数	类型	备注	默认值	是否必须
duration	Number	动画过渡时间	300	false
position	String	tab标题位置	'top'	false
title	Array	标题数组	[{ name: '我的' }]	false
titleStyles	Object	标题样式 （驼峰命名：backgroundColor）	{}	false
activeStyle	Object	标题激活样式 （驼峰命名：backgroundColor）	{}	false
titleBoxStyles	Object	滑动页样式 （驼峰命名：backgroundColor）	{}	false

使用自定义插槽

• 在组件中添加template
• 添加div,class为tab-slider

   <vue-tabslider
      :duration="300"
      :position="'top'"
      :title="titleData"
      :titleStyles="titleStyles"
      :activeStyle="activeStyle"
      :titleBoxStyles="titleBoxStyles"
        style="width:100vw;height:100vh;">
    <template>
      <div class="tab-slider" style="background:#fde1e1">
        first
      </div>
      <div class="tab-slider" style="background:#b2c0f1">
        second
      </div>
      <div class="tab-slider" style="background:#e6f5ea">
        third
      </div>
      <div class="tab-slider" style="background:#e6d3f5">
        four
      </div>
    </template>
  </vue-tabslider>

属性举例

// 标题数组
title: [
  {
    name: '首页'
  },
  {
    name: '数据页'
  },
  {
    name: '我的'
  },
  {
    name: '更多'
  }
],
// 标题样式属性
titleStyles: {
  borderRight: '1px solid #333'
},
// 滑动页样式属性
titleBoxStyles: {
  paddingLeft: '1px',
  background: '#FFFFFF',
  width: '100%'
},
// 标题激活样式属性
activeStyle: {
  color: '#745fe4',
  fontSize: '30px'
}

效果展示

源码地址：https://github.com/liqin1059/vue-tabslider