vue使用动态组件实现TAB切换效果完整实例

一、方法1:使用Vant组件库的tab组件

Vant 2 - Mobile UI Components built on Vue

vue使用动态组件实现TAB切换效果完整实例_第1张图片

二、 方法2:手动创建tab切换效果

vue使用动态组件实现TAB切换效果完整实例_第2张图片

vue使用动态组件实现TAB切换效果完整实例_第3张图片

1.在components文件夹下创建切换的.vue页面、引入使用

import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
components: {
    one,
    two,
    three,
    four,
},

2.布局:上面放tab点击的标签,下面放组件呈现对应内容

// 然后使用v-for循环出来呈现

3.写好上面的tab点击标签,定义数据修改样式

// 首先我们在data中定义数组cardArr存放点击tab的数据
data() {
   return {
      whichIndex: 0,
      cardArr: [
        {
          componentName: "动态组件一",
          componentId: "one",
        },{
          componentName: "动态组件二",
          componentId: "two",
        },{
          componentName: "动态组件三",
          componentId: "three",
        },{
          componentName: "动态组件四",
          componentId: "four",
        },
      ],
    };
},
// 又因为需要有高亮状态样式:默认索引0高亮
.highLight {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: translate3d(0, -1px, 0);
}

三、完整代码



总结

到此这篇关于vue使用动态组件实现TAB切换效果的文章就介绍到这了,更多相关vue动态组件实现TAB切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue使用动态组件实现TAB切换效果完整实例)