Vue.js标签页组件使用方法详解


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了Vue.js标签页组件使用的具体代码,供大家参考,具体内容如下

效果

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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
js实现简单锁屏功能实例
May 27 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
基于JavaScript获取base64图片大小
Oct 18 #Javascript
react MPA 多页配置详解
Oct 18 #Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
You might like
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python中的文件和目录操作实现代码
2011/03/13 Python
详解Django框架中的视图级缓存
2015/07/23 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
一个入门级python爬虫教程详解
2021/01/27 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
社区维稳工作方案
2014/06/06 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书