028-86922220

关于创新互联

多方位宣传企业产品与服务突出企业形象

公司简介公司的服务荣誉资质新闻动态联系我们

如何在Vue.js中使用标签页组件-创新互联

本篇文章给大家分享的是有关如何在Vue.js中使用标签页组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联主营江城网站建设的网络公司,主营网站建设方案,APP应用开发,江城h5微信平台小程序开发搭建,江城网站营销推广欢迎江城等地区企业咨询

index.html




 
 
 
 标签页组件
 


 
 
 
 标签一的内容
 
 
 标签二的内容
 
 
 标签三的内容

var app = new Vue({ el: '#app', data: { activeKey: '1' } });

样式表 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: '\
 \
 \
 \
 \
 {{item.label}}\

\

\ \ \ \ \ ', 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: '\
 \
 \
 ',
 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中使用标签页组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：如何在Vue.js中使用标签页组件-创新互联
URL标题：http://kswsj.cn/article/phejc.html

其他资讯