原生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 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
You might like
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python中xrange和range的区别
2014/05/13 Python
Python提取网页中超链接的方法
2016/09/18 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
个人求职信范例
2014/01/29 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers