相思资源网 Design By www.200059.com
本文实例为大家分享了Vue.js标签页组件使用的具体代码，供大家参考，具体内容如下
效果
入口页 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签页组件</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <div id="app" v-cloak> <tabs v-model="activeKey"> <pane label="标签一" name="1"> 标签一的内容 </pane> <pane label="标签二" name="2"> 标签二的内容 </pane> <pane label="标签三" name="3"> 标签三的内容 </pane> </tabs> </div> <script src="/UploadFiles/2021-04-02/vue.js">样式表 style.css
[v-clock]{ display: none; } .tabs{ font-size: 14px; color: #657180 } .tabs-bar:after{ content: ''; display: block; width: 100%; height: 1px; background: #d7dde4; margin-top: -1px; } .tabs-tab{ display: inline-block; padding: 4px 16px; margin-right: 6px; background: #fff; border: 1px solid #d7dde4; cursor: pointer; position: relative; } .tabs-tab-active{ color: #ee99ff; border-top: 1px solid #3399ff; border-bottom: 1px solid #fff; } .tabs-tab-active:befor{ content: ''; display: block; height: 1px; background: #3399ff; position: absolute; top: 0; left: 0; right: 0; } .tabs-content{ padding: 8px 0; }标签页外层的组件tabs tabs.js
Vue.component('tabs',{ template: ' <div class="tabs"> <div class="tabs-bar"> <!--标签页标题，这里要用v-for--> <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)"> {{item.label}} </div> </div> <div class="tabs-content"> <!--这里的slot就是嵌套的pane--> <slot></slot> </div> </div>', props: { value: { type: [String, Number] } }, data: function () { return { //用于渲染tabs的标题 currentValue: this.value, navList: [] } }, methods: { tabCls(item){ return [ 'tabs-tab', { 'tabs-tab-active': item.name === this.currentValue } ] }, getTabs(){ //通过遍历子组件，得到所有的pane组件 return this.$children.filter(function (item) { return item.$options.name === 'pane'; }); }, updateNav(){ this.navList = []; //设置对this的引用，在function回调里，this的指向的并不是Vue实例 var _this = this; this.getTabs().forEach((pane, index) => { _this.navList.push({ label: pane.label, name: pane.name || index }); //如果没有给pane设置name，默认设置它的索引 if(!pane.name) pane.name = index; //设置当前选中的tab的索引 if(index === 0){ if(!_this.currentValue){ _this.currentValue = pane.name || index; } } }); this.updateStatus(); }, updateStatus(){ var tabs = this.getTabs(); var _this = this; //显示当前选中的tab对应的pane组件，隐藏没有选中的 tabs.forEach(tab => { return tab.show = tab.name === _this.currentValue; }); }, handleChange: function (index) { var nav = this.navList[index]; var name = nav.name; this.currentValue = name; this.$emit('input', name); this.$emit('on-click', name); } }, watch: { value: val => { this.currentValue = val; }, currentValue: function () { this.updateStatus(); } } });标签页嵌套的组件pane pane.js
Vue.component('pane',{ name: 'pane', template: ' <div class="pane" v-show="show"> <slot></slot> </div>', data: function () { return { show: true } }, props: { name: String }, label: { type: String, default: '' }, methods: { updateNav: function () { this.$parent.updateNav(); } }, watch: { label: function () { this.updateNav(); } }, mounted: function () { this.updateNav(); } });更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Vue.js标签页组件使用方法详解的评论...