前端vueVue

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

2019-04-16  本文已影响72人  88b61f4ab233

前言

标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。
因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 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 组件中，我们做了以下设计：

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();
 }
 }
});
总结如下：

样式：

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

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>',
...

在标签页组件中的方法中，新增了 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;
        }
    });
}

新增的样式：

.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>

效果：


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

效果：


最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。


上一篇下一篇

猜你喜欢

热点阅读