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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
js实现微博发布小功能
Jan 12 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
基于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
JAVA/JSP学习系列之二
2006/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序 Storage更新详解
2019/07/16 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python的常用模块之collections模块详解
2018/12/06 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
爸爸的花儿落了教学反思
2014/02/20 职场文书
校园文明倡议书
2014/05/16 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
董存瑞观后感
2015/06/11 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Redis中一个String类型引发的惨案
2021/07/25 Redis
Nginx跨域问题解析与解决
2022/08/05 Servers