网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个小的Vue.js tab切换组件组件,可创建可响应内容选项卡式,可拖动的Chrome浏览器选项卡样式。
将组件插入模板。
<template>
<vue-tabs-chrome
v-model="tab"
:tabs="tabs"
/>
</template>
创建一个基本的选项卡组件,并为每个选项卡定义标签,键和图标,如下所示:
export default {
data () {
return {
tab: 'Custom Tab',
tabs: [
{
label: 'google',
key: 'google',
favico: require('./assets/google.jpg')
},
{
label: 'facebook',
key: 'facebook',
favico: require('./assets/fb.jpg')
},
{
label: 'New Tab',
key: 'costom key',
favico: (h, { tab, index }) => {
return h('span', tab.label)
}
}
]
}
}
}
组件默认配置项。
value: {
type: [String, Number],
default: ''
},
tabs: {
type: Array,
default: () => []
},
props: {
type: Object,
default: () => {
return {}
}
},
minWidth: {
type: Number,
default: 40
},
maxWidth: {
type: Number,
default: 245
},
gap: {
type: Number,
default: 7
},
insertToAfter: {
type: Boolean,
default: false
},
theme: {
type: String,
default: ''
},
isMousedownActive: {
type: Boolean,
default: true
},
renderLabel: {
type: Function
}
API方法。
// add new tab
addTab(tab1, [, ...tab, ...tabN])
// remove tab
removeTab(tabKey or index)
// get tab info
getTabs()
转载请注明来源:Vue tab切换组件(vue-tabs-chrome)仿谷歌浏览器
本文永久链接地址:https://www.moyouyouw.cn/code/1125.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论