使用Vue.js实现选项卡组件

使用 HTML/CSS/JavaScript 实现简单的选项卡组件 用最基本的 JavaScript/CSS 实现了选项卡组件。

下面在此基础上,封装为在 Vue.js 下使用的组件。

示例和源代码见:


See the Pen
tabs-vue
by Marshal Wu (@marshalw)
on CodePen.

基本上,在使用的时候只需要这样调用就好了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const app = new Vue({
el: "#app",
data: {
tabNames: ["选项卡-1", "选项卡-2"]
},
components: {
TabsContainer
},
template: `
<tabs-container :tabNames='tabNames'>
<template #1>内容-1</template>
<template #2>内容-2</template>
</tabs-container>
`
});

使用了 Vue.js 的 Named Slot(具名插槽),而且是动态的。