本文实例为大家分享了vue选项卡组件的实现代码,供大家参考,具体内容如下
主要功能:点击不同的选项,显示不同的内容
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="https://www.atool.online/article/css/style.css" /> <script src="https://www.atool.online/article/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.atool.online/article/js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ var app=new Vue({ el: "#app", data: { activeKey: '1'//被选择的选项 } }); }); </script> </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="https://www.atool.online/article/js/pane.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.atool.online/article/js/tabs.js" type="text/javascript" charset="utf-8"></script> </body> </html>
pane.js
Vue.component('pane',{ name: 'pane', template: '\ <div class="pane" v-show="show"> \ <slot></slot> \ </div>', data: function(){ return { show: true } }, props: { name: { type: String }, label: { type: String, default: '' } }, methods: { updateNav() { this.$parent.updateNav(); } }, watch: { label(){ this.updateNav(); } }, mounted() { this.updateNav(); } })
tabs.js
Vue.component('tabs',{ template: '\ <div class="tabs">\ <div class="tabs-bar">\ <div \ :class="tabCls(item)" \ v-for="(item,index) in navList" \ @click="handleChange(index)"> \ {{item.label}} \ </div>\ </div> \ <div class="tabs-content"> \ <slot></slot> \ </div> \ </div>', props: { value: { type: [String,Number] } }, data: function(){ return { currentValue: this.value, navList: [] } }, methods: { tabCls: function(item){ return [ 'tabs-tab', { 'tabs-tab-active': item.name===this.currentValue } ] }, //遍历所有为pane的子元素 getTabs(){ return this.$children.filter(function(item){ return item.$options.name==='pane'; }); }, //将pane子元素中label name放进navList数组 updateNav() { this.navList=[]; var _this=this; this.getTabs().forEach(function(pane,index){ _this.navList.push({ label: pane.label, name: pane.name ||index }); if(!pane.name) pane.name=index; if(index===0){ if(!_this.currentValue){ _this.currentValue=pane.name || index; } } }); this.updateStatus(); }, updateStatus(){ var tabs=this.getTabs(); var _this=this; //显示当前正在选中的 tabs.forEach(function(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: function(val){ this.currentValue=val; }, currentValue: function (){ this.updateStatus(); } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。