每周有收获之--实战德芙般丝滑tabs

最新推荐文章于 2022-01-21 11:19:57 发布
最新推荐文章于 2022-01-21 11:19:57 发布
阅读量99 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40774743/article/details/112794888
版权

像element ui 一样nav 部分丝滑的tabs切换

关键在于获取dom 的宽度。通过宽度计算自己应该的left 和自身宽度  然后使用css3 transition: all 1s ease;或者其他 css 插件或者js 插件实现动画

 

红色标记处切换要有丝滑动效果。

mounted 后执行截图中的函数；

乘以 0.8 是因为 。 ui要求 下划线的宽度是 当前nav 宽度的 80%

 

 

 

yakunyang（2016）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-tabs事件绑定（Element UI）
日常笔记/总结/系列知识梳理
04-27 8万+
标签代码 <el-tabs v-model="activeName"> <el-tab-pane name="0" label="标签1"></el-tab-pane&amp
docsify,docsify-tabs 展示插件
09-21
docsify,docsify-tabs
移动端tab切换时下划线的滑动效果
BetterGG的博客
08-03 9256
本篇会放置多种下划线滑动效果，一篇一篇增加，更新中 1、当前 tab 出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致），伴随过渡效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change tab&
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
热门推荐
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-21 1万+
实战场景描述 实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。 1、确定好每个Tab内容 参考官网的例子改成我们的内容就好 2、Tab切换事件 今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T
van-tabs下划线位置错位
ljw的博客
01-21 2369
初始化页面时，van-tabs下划线位置错位： 解决方案： ①如果是通过v-show来控制组件显隐，改为v-if: <applyList v-if="index === '2'"></applyList> ②使用官方提供的resize方法： <van-tabs ref="tabs" v-model="active" title-active-color="#2080F7" color="#2080F7"> <van-tab tit.
el-tabs 判断拦截阻止切换标签
@必意玲
11-05 1万+
1. 拦截Element-UI中el-tabs组件的切换效果 需求：在切换tabs时，如果当前页面内容没有保存，则拦截切换并提示必填校验信息 先看下效果，点击新增，没有填写项目信息直接切换是会被阻止跳转 在点击下修改，内容是已经存在的在点击 年度计划，则可以跳转tabs标签页 2. element el-tabs before-leave 方法进行拦截 3. 坑点 有时候必填完后返回 true 或者false 这个方法拦截不到，如 vaild ? true : false 所以建议使用 promi
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
Auto-Group Tabs-0.0.20.zip
最新发布
12-27
名称：Auto-Group Tabs ---------------------------------------- 版本：0.0.20 作者：florian.reuschel.dev 分类：网页增强 ---------------------------------------- 概述：根据 URL 自动将选项卡添加到您配置的...
react-native-material-tabs：Tabs的Material Design实现
02-04
npm i --save react-native-material-tabs 或者如果您使用纱线 yarn add react-native-material-tabs 第2步 开始使用组件 import MaterialTabs from ' react-native-material-tabs ' ; 用法 import React , { ...
chrome-tabs：HTMLCSS中的Chrome样式的标签
02-03
Chrome-Tabs 的核心在于其CSS样式，它复刻了Chrome浏览器的标签页外观，包括颜色、边框、阴影、选中状态等。你需要引入提供的CSS文件，然后应用到你的HTML结构上，以获得一致的视觉效果。此外，还可以自定义样式以...
vue 中的 computed 的 set
qq_40774743的博客
11-19 6891
先看代码 computed: { fullName: { // getter get: function() { return this.firstName + ' ' + this.lastName }, // setter set: function(newValue) { console.log('9999'); var names = newValue.split(' ') this.firstName = names[0] } } }, 解释：代码中，fullName
vue v-html 字符串 动态 渲染模版 v-html 动态组件 添加事件
qq_40774743的博客
09-27 2632
// 1，首先在 webpack 配置中 alias: { 'vue$': 'vue/dist/vue.esm.js' // 内部为正则表达式 vue结尾的 } // 2 在main 中 // new Vue({ // router, // store, // render: h => h(App) // }).$mount("#app") // 3 动态组件demo ...
vue 监听数组对象 深度监听
qq_40774743的博客
11-29 2438
watch: { //监视交核实题目这个开关，如果是开启，才能有添加按钮 SwitchOne(val){ alert("---hahha 开关被监视了",val) if(val){ this.isShowAddBtn = true; }else{ this.isShowAddBtn = false; } }, 'dynamicValidateForm':{ // 监视选中的数据...
vue-cli3.0中vue.config.js配置
qq_40774743的博客
08-27 505
vue-cli3.0中vue.config.js配置 // 打包去掉console const TerserPlugin = require('terser-webpack-plugin'); module.exports = { // 查阅 https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config // 项目部署的基础路径,我们默认假设你的应用将会部署在域名的根部，比如 https://www.my-app.com
Vue 组件通信 非父子组件之间通信（兄弟组件之间通信）
qq_40774743的博客
07-20 488
1， 父子组件之间通信（属性传值，props承接，this.$emit往上带参传值，自定义事件接受。....过程省去,,,,,）; 2，父子，非父子，可使用 vuex 实现，过程省去，goole解决（以及官网解决之）； 2,方法二，非父子组件之间通信（1，需要建立一个中转的Vue实例Bus，然后组件A，组件B 通过这个bus实例中转一下达成AB通信的目的）； （1），建立bus.js(bus...
vue 新增新属性，vue书写规范
qq_40774743的博客
01-18 438
有时你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性， methods: { clickAdd(){ this.obj = Object.assign({},this.obj,{ "age":1111 }) } vue 方法放置顺序 comp...
vue 一些必须的规则（规范）
qq_40774743的博客
11-19 389
1，父子组件（强耦合）则 父亲为 ToDoList 儿子组件应该在父亲组件的名字之上命名 例如ToDoListItem 2，组件的命名的单词的顺序。应该是描述性质的形容词或动词在最后。例如SearchButtonClear.vue（名词在前） 而不是ClearSearchButton 3.单例组件（不需要props传输值）命名：举个例子：TheHead TheSiderBar 4.私有属性 建议： $_siyoushuxing(){} 或者： methods：{ p...
每周有收获之--Vue 边界组件循环引用、es6 Module循环引用
qq_40774743的博客
01-17 238
Vue 边界循环引用。需要注意的地方 如果是tree状态递归组件，注意递归过程中的<Tree v-if> 判断。否则容易溢出 index业务页面中先A组件，但是A使用了B组件。B组件中也使用了A组件 “形成了父子悖论” 除了注意v-if判断。A组件可以在动态引入B组件。或者在A组件beforeCreate 中注册B组件。或者将二者全注册。 方法1: //方法2 在Tree组件中 beforeCreate: function (...
vue v-if v-show
qq_40774743的博客
02-27 166
1.共同点都是动态显示DOM元素2.区别（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为...
class="dialog-tabs el-tabs el-tabs--left"
08-30
class="dialog-tabs el-tabs el-tabs--left" 是用于添加样式的类名，在element ui的el-dialog组件中使用el-tabs组件时，可以通过添加这个类名来指定对话框中的选项卡组件的样式和布局。这个类名的具体样式定义可以在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值