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