文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-20 06:01

关注

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

Vant 2 - Mobile UI Components built on Vue

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

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循环出来呈现
<template>
   <div id="app">
      <div class="top">
      <!-- 放置tab点击标签 -->
         <div class="crad"
         :class="{ highLight: whichIndex == index }"
         v-for="(item, index) in cardArr"
         :key="index"
         @click="whichIndex = index">
            {{ item.componentName }}
        </div>
      </div>
      <div class="bottom">
        <!-- 放置动态组件... -->
       <!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染,
       浏览器也就不会回流和重绘,就可以优化性能。不使用的话页面加载就会慢一点 -->
       <keep-alive>
         <component :is="componentId"></component>
       </keep-alive>
      </div>
   </div>
</template>

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

三、完整代码

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  data() {
    return {
      whichIndex: 0,
      componentId: "one",
      cardArr: [
        {
          componentName: "动态组件一",
          componentId: "one",
        },
        {
          componentName: "动态组件二",
          componentId: "two",
        },
        {
          componentName: "动态组件三",
          componentId: "three",
        },
        {
          componentName: "动态组件四",
          componentId: "four",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 100px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯