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

 
 
 



 
 
 火星疑似发现“外星人墓地”？至今无法解释
 
 
 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠
 
 
 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》
 
 


2 关闭属性


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


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



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

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



...
template: '\
\
	
\
		\
		
\
			{{ item.label }}\
			\
			
\
		
\
		
\
		 \
			\
		
\
	 
',
...


  
这里使用 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 属性：




 
 
 火星疑似发现“外星人墓地”？至今无法解释
 
 
 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠
 
 
 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》
 
 


效果：

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;
}

效果：

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


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