Vue.js标签页组件使用方法详解
2019-11-06 07:04
1751 查看
本文实例为大家分享了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="https://unpkg.com/vue/dist/vue.js"></script> <script src="pane.js"></script> <script src="tabs.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { activeKey: '1' } }); </script> </body> </html>
样式表 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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- Vue.js数字输入框组件使用方法详解
- Vue.js路由组件vue-router使用方法详解
- vue全局组件与局部组件使用方法详解
- vue.js如何将echarts封装为组件一键使用详解
- 在VUE里使用全局公共组件(自定js文件)的简单方法,bus实现父子或兄弟组件用$emit的通信方法
- JS组件Bootstrap Table使用方法详解
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- Vue.js路由组件vue-router的使用方法
- Vue.js路由vue-router使用方法详解
- JS树形菜单组件Bootstrap TreeView使用方法详解
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- vue组件tabbar使用方法详解
- 使用vue.js在页面内组件监听scroll事件的方法
- 如何在Vue.js中实现标签页组件详解
- 详解vue组件中使用路由方法
- Vue.js 使用script或template标签创建组件模板内容
- JS组件Bootstrap Select2使用方法详解
- JS组件Bootstrap导航条使用方法详解
- Vue中fragment.js使用方法详解