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实现CheckBox全选全不选
Jun 27 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
js回调函数仿360开机
Dec 26 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
校领导推荐信
2013/11/01 职场文书
高一家长会邀请函
2014/01/12 职场文书
运动会拉拉队口号
2014/06/09 职场文书
个人党性分析总结
2015/03/05 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书