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

最新推荐文章于 2024-07-24 13:33:51 发布

霜如明月

最新推荐文章于 2024-07-24 13:33:51 发布

阅读量3k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/89340592

版权

本文详细介绍了如何在Vue.js中实现一个标签页组件，包括基础版的创建，关闭属性的添加以及切换动画的实现。组件采用父子组件通信的方式，通过slot定义内容，使用v-show控制显示隐藏，并通过监听和方法更新状态。此外，还展示了如何添加关闭功能和切换动画，为开发者提供了一种实现标签页组件的实用方案。

摘要由CSDN通过智能技术生成

###前言

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