wpf 标签页 样式_vue2组件系列第四十四节：Tab 标签页

准备工作：

1. 创建一个页面:Tab.vue
2. 在router.js里配置Tab页面的路由

{ path: '/tab', name: 'tab', component: () => import('./views/Tab.vue') }

1. 在index.vue里添加一项

Tab 标签页

至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了40个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Tab标签页：

基础方法：

内容1内容2内容3data() { return { active: 2 } },

横向滚动：

当大于4个标签时，Tab是可以横向滚动的

内容1内容2内容3内容4内容5内容6

风格转换：

内容1内容2内容3内容4

自定义标题：

标签1

标签2

设置slot为title，可以自定义标题。

Tab事件：

click：点击事件，点击标签时触发

change：当前激活的标签改变时触发

scroll：滚动时触发

以上事件都有两个参数，分别为index(标签索引值)，title(标题)

到目前为止呢，Tab就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油