vue之tab栏切换

这篇具有很好参考价值的文章主要介绍了vue之tab栏切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一个简单的tab栏切换组件,由tabs以及tab-pane组成

效果图
vue之tab栏切换

使用

<template>
  <div class="container">
    <tabs
      default-active="2"
      class="build-tabs"
    >
      <tab-pane
        label="tab栏标题1"
        index="1"
      >tab栏内容1</tab-pane>
      <tab-pane
        label="tab栏标题tab栏标题2"
        index="2"
      >
        tab栏内容2
      </tab-pane>
      <tab-pane
        label="tab栏标题"
        index="3"
      >tab栏内容3</tab-pane>
      <tab-pane
        label="标题"
        index="4"
      >tab栏内容4</tab-pane>
      <tab-pane
        label="tab栏标题3"
        index="5"
      >tab栏内容5</tab-pane>
    </tabs>
  </div>
</template>

tabs

<template>
  <div
    v-show="pans.length"
    class="tabs"
  >
    <div class="tab-title">
      <div
        v-for="(item) in pans"
        :key="item.id"
        class="item"
        :class="{ 'active': currentActive === item.index }"
        @click="changeTab(item.index)"
      >{{ item.label }}</div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mode: {
      type: String,
      default: "horizontal/vertical"
    },
    defaultActive: {
      type: String | Number,
      default: '1'
    },
    defaultColor: {
      type: String,
      default: '#409EFF'
    }
  },
  data: () => {
    return {
      currentActive: '',
      pans: []
    }
  },
  computed: {

  },
  watch: {
    defaultActive: {
      handler (newVal) {
        this.currentActive = newVal
      },
      immediate: true
    }
  },
  mounted () {
  },

  methods: {
    changeTab (val) {
      this.currentActive = val
    },
  }
}
</script>
<style scoped lang="scss">
::root {
  --color: "#409EFF";
}
.tabs {
  .tab-title {
    display: flex;
    // align-items: flex-start;
    align-items: stretch;	// 侧边栏时,使侧栏高度与内容高度一致,按最高的显示
    margin-bottom: 14px;
    border-bottom: 1px solid #ccc;
    .item {
      padding: 20px;
      /* padding-bottom: 20px; */
      cursor: pointer;
      white-space: nowrap;
    }
    .active {
      // color: var(--color);
      color: #409EFF;
      /* padding-bottom: 15px; // 修正边框值:20px - 5px = 15px */
      border-bottom: 5px solid #409EFF;
      background-image: linear-gradient(
        to top,
        rgba($color: #409EFF, $alpha: 0.2),
        transparent
      );
    }
  }
}
</style>

tab-pane文章来源地址https://www.toymoban.com/news/detail-473516.html

<template>
  <div
    v-show="show && renderPan"
    class="tab-pane"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'tabPane',
  props: {
    index: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      required: true
    }
  },
  data: () => {
    return {
      renderPan: false
    }
  },
  computed: {
    show () {
      if (this.$parent.currentActive === this.index) return true
      return false
    }
  },
  mounted () {
    this.$parent.pans.push({ id: Date.parse(new Date()) + Math.random(), index: this.index, label: this.label });
    this.renderPan = true
  },
  methods: {
  },
}
</script>
<style scoped lang="scss">
</style>

到了这里,关于vue之tab栏切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue自定义组件——split-pane

    github地址: https://github.com/lxmghct/my-vue-components props: splitCount: 分割数量, default: 2 direction: 分割方向, \\\'vertical\\\' or \\\'horizontal\\\', default: \\\'horizontal\\\' defaultRatio: 默认比例, 类型为数组, default: [1/spiltCount, 1/spiltCount, ...] slots: ... ... ... events: @resize: 拖动分割条时触发, 参数为分割线两侧的div @

    2023年04月14日
    浏览(23)
  • elementUI如何给el-tabs/el-tab-pane添加图标

    原始的el-tabs 添加图标后的样式 ps:红色是因为添加了额外的css 在此不做描述 html部分的代码 给 el-tabs 添加 stretch 属性,使得tabs平铺满整个页面; 通过 v-if 控制选中时图标的颜色更改(其实就是换个图标); style部分的代码 由于用的是自定义的图标,所以需要在background中引

    2024年02月13日
    浏览(42)
  • vue之tab栏切换

    一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 tabs tab-pane

    2024年02月08日
    浏览(37)
  • Element ui tabs组件左右箭头切换 (第一项为固定项)

    之前发布过一篇关于切换的 但是有点瑕疵 这次补充一下 data里没啥可看的 就是要渲染的数据定义 在生命周期里刚开始的时候判断了一下 看是否添加固定项 因为我这个是组件 这个是判断条数低于几条的时候不展示左右箭头 有需求的话看是开局就添加还是监测到数据了在触发

    2024年02月01日
    浏览(47)
  • el-tab-pane 和el-tooltip及el-tree 组合使用

    这里主要是在el-tab-pane中的label属性不给赋值,单独写在el-tooltip中,使用span去写当前的名称,就可以实现鼠标放上去,浮现树的效果。

    2024年02月13日
    浏览(41)
  • 通过JavaScript、css、H5 实现简单的tab栏的切换和复用

    目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取

    2023年04月09日
    浏览(38)
  • 使用Vue2开发一个图片预览组件,支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作

    话不多说,咱们赶紧来开启本章的内容,这次小编给各位带来的依旧是实用类文章,分享如何开发一个完整的 图片预览组件 ,它支持多图切换、放大缩小、旋转、鼠标滚轮操作、键盘按键控制、拖动等等的功能,并且使用方便、易扩展,零依赖。 项目演示技术小编采用的是

    2024年02月09日
    浏览(72)
  • 鸿蒙 ArkTS Tabs组件实现类微信(可滑动的)tabBar页签切换页面功能

    :harmonyOS   鸿蒙开发  ArkTS  TabContent 使用场景:类微信底部导航栏,点击/左右滑动切换页面并加载数据 开发环境:ArkTS3.1  API9  Phone设备 HMOS Dev官方文档:文档中心 演示效果: 目录 完整Demo已提交至Gitee 搭建页面 自定义TabContent(往后翻有完整代码) 思路 开始 完

    2024年02月04日
    浏览(55)
  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

    前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:           #### 使用方法 ```使用方法 swiperTabList: [\\\"2023-06-10\\\",\\\"2023-06-11\\\",\\\"2023-06-12\\\",\\\"2023-06-13\\\",\\\"2023-06-14\\\",\\\"2023-06-15\\\"], //导航列表 swiperTabIdx:

    2024年02月08日
    浏览(44)
  • Vue3实现带动画效果的tab栏切换

    效果图如下所示: 实现思路: 其实很简单 1、首先切换tab栏时tab标签激活下标与对应显示内容下标要一致。 2、其次点击tab栏切换时更新下标 3、最后就是css添加动画效果 这样就 了!!! 上全部代码

    2024年02月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包