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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
浅谈es6中的元编程
Dec 01 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
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
js实现简易计算器小功能
2020/11/18 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
pytorch forward两个参数实例
2020/01/17 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
详解anaconda安装步骤
2020/11/23 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
护士自荐信范文
2015/03/25 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
环境卫生标语
2015/08/03 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android