首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

如何在Vue.js中实现标签页组件详解

Posted in Javascript onJanuary 02, 2019

前言

标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。

因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 slot。所以一般的设计方案是，在 slot 中定义多个 div，然后在接到切换消息时，再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了，我们希望在组件中处理这些交互逻辑，slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现，pane 组件嵌在 tabs 组件中。

1 基础版

因为 tabs 组件中的标题是在 pane 组件中定义的，所以在初始化或者动态变化标题时，tabs 组件需要从 pane 组件中获取标题。

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>标签页组件</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="app" v-cloak>
 <tabs v-model="activeIndex">
 <pane label="科技">
 火星疑似发现“外星人墓地”？至今无法解释
 </pane>
 <pane label="体育">
 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠
 </pane>
 <pane label="娱乐">
 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》
 </pane>
 </tabs>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="tabs.js"></script>
<script>
 var app = new Vue({
 el: '#app',
 data: {
 activeIndex: 0
 }
 });
</script>
</body>
</html>

pane 组件：

Vue.component('pane', {
 name: 'pane',
 template: '\
 <div class="pane" v-show="isShow">\
 <slot></slot>\
 </div>\
 ',
 props: {
 //标题
 label: {
 type: String,
 default: ''
 }
 },
 data: function () {
 return {
 //显示或隐藏
 isShow: true
 }
 },
 methods: {
 //通知父组件，更新标题
 init() {
 this.$parent.init();
 }
 },
 watch: {
 //当 label 值发生变化时，更新标题
 label() {
 this.init();
 }
 },
 //挂载时，更新标题
 mounted() {
 this.init();
 }
});

在 pane 组件中，我们做了以下设计：

  • 因为 pane 组件需要控制标签页内容的显示与隐藏，所以我们在 data 中定义了一个 isShow，并用 v-show 指令来控制内容的显示或隐藏。当点击这个 pane 所对应的标签页标题时，它的 isShow 被设置为 true。
  • 我们需要一个标识来识别不同的标签页标题，本示例用的是 pane 组件定义顺序的索引。
  • 在 props 中定义了 label，用于存放标题。因为 label 可以动态变化，所以必须在挂载 pane 以及当 label 值发生变化（通过监听实现）时，通知父组件，重新初始化标题。因为 pane 是独立组件，所以这里使用了 this.$parent 来调用父组件 tabs 的初始化方法。

tabs 组件：

Vue.component('tabs', {
 template: '\
 <div class="tabs">\
 <div class="tabs-bar">\
 <!-- 标签页标题-->\
 <div :class="tabClass(item)"\
 v-for="(item, index) in titleList"\
 @click="change(index)">\
 {{ item.label }}\
 </div>\
 </div>\
 <div class="tabs-content">\
 <!-- pane 组件位置-->\
 <slot></slot>\
 </div>\
 </div>',
 props: {
 value: {
 type: [String, Number]
 }
 },
 data: function () {
 return {
 currentIndex: this.value,
 titleList: []//存放标题
 }
 },
 methods: {
 //设置样式
 tabClass: function (item) {
 return ['tabs-tab', {
 //为当前选中的 tab 添加选中样式
 'tabs-tab-active': (item.name === this.currentIndex)
 }]

 },
 //获取定义的所有 pane 组件
 getTabs() {
 return this.$children.filter(function (item) {
 return item.$options.name === 'pane';
 })
 },
 //更新 pane 是否显示状态
 updateIsShowStatus() {
 var tabs = this.getTabs();
 var that = this;
 //迭代判断并设置某个标签页是显示还是隐藏状态
 tabs.forEach(function (tab, index) {
 return tab.isShow = (index === that.currentIndex);
 })
 },
 //初始化
 init() {
 /**
 * 初始化标题数组
 */
 this.titleList = [];
 var that = this;//设置 this 引用
 this.getTabs().forEach(function (tab, index) {
 that.titleList.push({
  label: tab.label,
  name: index
 });

 //初始化默认选中的 tab 索引
 if (index === 0) {
  if (!that.currentIndex) {
  that.currentIndex = index;
  }
 }
 });

 this.updateIsShowStatus();
 },
 //点击 tab 标题时，更新 value 值为相应的索引值
 change: function (index) {
 var nav = this.titleList[index];
 var name = nav.name;
 this.$emit('input', name);
 }
 },
 watch: {
 //当 value 值发生改变时，更新 currentIndex
 value: function (val) {
 this.currentIndex = val;
 },
 //当 currentIndex 值发生改变时，更新 pane 是否显示状态
 currentIndex: function () {
 this.updateIsShowStatus();
 }
 }
});
  • getTabs() 中通过 this.$children 来获取定义的所有 pane 组件。因为很多地方都会用到getTabs() ，所以这里把它单独定义出来。
  • 注意： methods 中如果存在回调函数，那么需要在外层事先定义一个 var that = this;，在 that 中引用 Vue 实例本身，也可以使用 ES2015 的箭头函数。
  • 在初始化方法中，我们通过迭代 pane 组件，初始化了标题数组，label 取定义的标题，name 取所在的索引。 标题数组用于模板定义中。
  • updateIsShowStatus() 用于更新 tab 是否显示状态。之所以独立出来，是为了在监听 currentIndex 发生变化时，也能调用该方法。
  • 在模板定义中，我们使用 v-for 指令渲染出标题，并绑定了 tabClass 函数，从而实现了动态设置样式。因为需要传参，所以不能使用计算属性。
  • 点击每一个 tab 标题时，会触发 change()，来更新 value 值为相应的索引值。在 watch 中，我们监听了 value 值，当 value 值发生改变时，更新 currentIndex。也监听了 currentIndex 值，当 currentIndex 值发生改变时，更新 pane 是否显示状态。

总结如下：

  • 使用组件嵌套方式，将多个 pane 组件作为 tabs 组件的 slot。
  • tabs 组件与 pane 组件，通过父子链（即 $parent 与 $children）实现通信。

样式：

[v-cloak] {
 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:hover {
 color: #336699;
 font-weight: bolder;
}

.tabs-tab-active {
 color: #336699;
 border-top: 1px solid #336699;
 border-bottom: 1px solid #fff;
}

.tabs-tab-active:before {
 content: '';
 display: block;
 height: 1px;
 background: #3399ff;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}

.tabs_content {
 padding: 8px 0;
}

.pane {
 margin-top: 26px;
 font-size: 16px;
 line-height: 24px;
 color: #333;
 text-align: justify;
}

效果：

如何在Vue.js中实现标签页组件详解

2 关闭属性

我们为 pane 组件新增一个 closable 属性，用于控制该标签是否可关闭。

在子窗口组件的 props 中，新增 closable 属性：

props: {
	...
	//是否可关闭
	closable: {
		type: Boolean,
		default: false
	}
}

在标签页组件中的模板中，新增关闭标签：

...
template: '\
<div class="tabs">\
	<div class="tabs-bar">\
		<!-- 标签页标题-->\
		<div :class="tabClass(item)"\
			v-for="(item, index) in titleList"\
			@click="change(index)">\
			{{ item.label }}\
			<span v-if="item.closable" class="close" @click="close(index,item.name)"></span>\
			</div>\
		</div>\
		<div class="tabs-content">\
		 <!-- pane 组件位置-->\
			<slot></slot>\
		</div>\
	 </div>',
...
  • 这里使用 v-if 指令，根据 closable 的值来判断是否构建 “关闭” 标签。
  • 点击事件绑定了 close() 函数，传入标签所在索引以及标签的名称。

在标签页组件中的方法中，新增了 close()，用于执行关闭标签页逻辑：

close: function (index, name) {
 //删除对应的标题元素
	this.titleList.splice(index, 1);

	var tabs = this.getTabs();
	var that = this;
	//迭代判断并设置点击的标签页是隐藏状态
	tabs.forEach(function (tab, index) {
		if (index === name) {
			return tab.isShow = false;
		}
	});
}
  • 首先在标题数组中删除对应的标题元素，因为 Vue.js 的核心是数据与视图的双向绑定。因此当我们修改数组时， Vue.js 就会检测到数组发生了变化，所以用 v-for 渲染的视图也会同步更新 。
  • 接着，隐藏对应的 tab 内容，我们通过传入的 name 与某个 tab 中的 index，逐一比对，如果确定是我们需要关闭的标签页，那么就隐藏其内容。其实这里使用 key 来表达更合适。

新增的样式：

.close{
 color: #FF6666;
}
.close::before {
 content: "\2716";
}

.close:hover {
 color: #990033;
 font-weight: bolder;
}

为需要添加关闭标签的 pane ，添加 closable 属性：

<div id="app" v-cloak>
 <tabs v-model="activeIndex">
 <pane label="科技" closable="true">
 火星疑似发现“外星人墓地”？至今无法解释
 </pane>
 <pane label="体育">
 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠
 </pane>
 <pane label="娱乐" closable="true">
 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》
 </pane>
 </tabs>
</div>

效果：

如何在Vue.js中实现标签页组件详解

3 切换动画

我们在切换标签页时，加上滑动动画吧，这很简单，只要在激活的样式中加上 transform 与 transition 样式即可：

.tabs-tab-active {
 color: #336699;
 border-top: 1px solid #336699;
 border-bottom: 1px solid #fff;
 transform:translateY(-1px);
 transition: transform 0.5s;
}

效果：

如何在Vue.js中实现标签页组件详解

我们让标签页标题被点击时，以动画的形式往上移动 1 个像素。是不是很酷呀O(∩_∩)O~

本文示例代码

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

如何在Vue.js中实现标签页组件详解

- Author -

deniro

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
如何使用less实现随机下雪动画详解
Jan 02 #Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
JavaScript ES6箭头函数使用指南
Dec 30 #Javascript
华为(1) 鸿蒙3.0(1) HarmonyOS(1) 蓝牙(1) 鸿蒙(2) 虚拟键盘(1) RustDesk(1) 蓝牙耳机(1) Debian(1) xhunter1.sys(1)
You might like
PHP传参之传值与传址的区别
2015/04/24 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python3.0 字典key排序
2008/12/24 Python
Python中使用中文的方法
2011/02/19 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python实现图片识别加翻译功能
2019/12/26 Python
VisionPros美国站：加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
请写一个C函数，若处理器是Big_endian的，则返回0；若是Little_endian的，则返回1
2015/07/16 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android