vue-tabslider vue tab滑动切换插件
vue-tabslider
npm
# npm installnpm install vue-tabslider --save
引入
在main.js中引入
Vue
使用
vue tab滑动插件
- 使用时需要给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
firstsecondthirdfour
属性举例
// 标题数组
title: [
{
name: '首页'
},
{
name: '数据页'
},
{
name: '我的'
},
{
name: '更多'
}
],
// 标题样式属性
titleStyles: {
borderRight: '1px solid #333'
},
// 滑动页样式属性
titleBoxStyles: {
paddingLeft: '1px',
background: '#FFFFFF',
width: '100%'
},
// 标题激活样式属性
activeStyle: {
color: '#745fe4',
fontSize: '30px'
}