原生JS封装vue Tab切换效果


Posted in Vue.js onApril 28, 2021

本文实例为大家分享了原生JS封装vue Tab切换的具体代码,供大家参考,具体内容如下

先看效果图

原生JS封装vue Tab切换效果

使用的技术

vue,js,css3

vue组件 可以直接使用

<template>
  <div class="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
        书友
      </li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
        书单
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      headerActive: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    //初始化抛发
    this.$emit("change", this.headerActive);
  },
  methods: {
    headerChange(index) {
      this.headerActive = index;
      this.$emit("change", index);
    },
  },
};
</script>

<style lang="less" scoped>
.bookcircle-header {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 286px;
    font-size: 14px;
    height: 29px;
    color: #1489fe;
    border: 1px solid #1489fe;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; // 解决边框溢出,将border包含在盒子内部
    li {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .active {
      color: white;
    }
    &::before {
      content: "";
      width: 143px;
      height: 100%;
      background-color: #1489fe;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 13px 0px 0px 13px;
      z-index: 1;
      transition: all 0.3s;
    }
    &.firend::before {
      transform: translateX(0);
      border-radius: 13px 0px 0px 13px;
    }
    &.booklist::before {
      transform: translateX(100%);
      border-radius: 0px 13px 13px 0px;
    }
  }
}
</style>

实现原理:

使用ul,li以及弹性盒子,首先给父元素设置宽高,然后通过弹性盒子将子元素 li 水平方向展开, 给子元素 li 设置 flex:1,让子元素平分父元素的宽。

然后给父元素设置伪元素,以绝对定位的方式覆盖第一个 li 元素, 通过z-index属性,控制伪元素和子元素的层级显示关系。

然后给伪元素设置 transition 属性 搭配 transform: translateX(); 属性,让元素水平移动就可以了

注意点:

1、虽然切换的点击事件在子元素上,并且也给子元素添加 了active样式,但tab的切换效果并不是通过子元素来实现的,而是通过父元素的伪元素来实现切换效果。
2、必须要根据子元素的 index 给父元素设置动态class, 这样父元素的伪元素才能根据选中的子元素执行切换动画
3、本组件使用的是 淘宝amfe-flexible、 postcss适配,使用时注意适配问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
Python模块文件结构代码详解
2018/02/03 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
Android笔试题总结
2014/11/29 面试题
电钳工人个人求职信
2014/05/10 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
前台接待岗位职责
2015/02/03 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
关于使用Redisson订阅数问题
2022/01/18 Redis