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的IE和火狐的兼容性注意事项
Mar 17 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
canvas绘制七巧板
Feb 03 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 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
PHP设计模式 注册表模式
2012/02/05 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php生成短域名函数
2015/03/23 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
中专毕业生自荐信
2013/11/16 职场文书
房屋委托书范本
2014/04/04 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python