Vue.js组件实现选项卡以及切换动画特效

最新推荐文章于 2025-07-07 09:42:02 发布

原创

最新推荐文章于 2025-07-07 09:42:02 发布 · 4.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #组件 #选项卡 #切换动画

本文介绍了在Vue.js中使用组件来实现选项卡功能，并添加切换动画效果。作者参照梁灏大神的《Vue.js实战》进行学习实践，通过组件`TabPanel`和`TabHeader`，实现了动态切换选项卡并带有平滑过渡动画的组件化解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js组件实现选项卡以及切换动画特效

最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。

组件分为pane.js和tabs.js两个部分，话不多说，直接上代码。

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <tabs v-model="activeKey">
         //transiton是Vue自带封装的，不懂的同学可以去找文档，主要是可以实现动画
            <transition name="slide-fade"> 
                <pane label="标签一" name="1">
                    标签一的内容
                </pane>
            </transition>
            <transition name="slide-fade">
                <pane label=" 标签二" name="2">
                    标签二的内容
                </pane>
            </transition>
            <transition name="slide-fade">
                <pane label="标签三" name="3">