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

于 2021-01-18 21:10:01 发布
阅读量98 收藏
点赞数
分类专栏： 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
    评论
专栏目录
docsify,docsify-tabs 展示插件
09-21
docsify,docsify-tabs
移动端tab切换时下划线的滑动效果
BetterGG的博客
08-03 9235
本篇会放置多种下划线滑动效果，一篇一篇增加，更新中 1、当前 tab 出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致），伴随过渡效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change tab&
手动动态改变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 , { ...
svelte-tabs:Svelte的选项卡组件
05-11
苗条的标签Svelte的选项卡组件安装npm install --save svelte-tabs基本用法 < script > import { Tabs , Tab , TabList , TabPanel } from 'svelte-tabs' ;</ script >< Tabs> < TabList> < Tab> One ...
vue 中的 computed 的 set
qq_40774743的博客
11-19 6888
先看代码 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 2620
// 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 2435
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 498
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 485
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 436
有时你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性， methods: { clickAdd(){ this.obj = Object.assign({},this.obj,{ "age":1111 }) } vue 方法放置顺序 comp...
vue 一些必须的规则（规范）
qq_40774743的博客
11-19 386
1，父子组件（强耦合）则 父亲为 ToDoList 儿子组件应该在父亲组件的名字之上命名 例如ToDoListItem 2，组件的命名的单词的顺序。应该是描述性质的形容词或动词在最后。例如SearchButtonClear.vue（名词在前） 而不是ClearSearchButton 3.单例组件（不需要props传输值）命名：举个例子：TheHead TheSiderBar 4.私有属性 建议： $_siyoushuxing(){} 或者： methods：{ p...
每周有收获之--Vue 边界组件循环引用、es6 Module循环引用
qq_40774743的博客
01-17 235
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 161
1.共同点都是动态显示DOM元素2.区别（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为...
每周一组件之--指令-- 防抖截流指令
qq_40774743的博客
12-28 158
可以来回传递参数的指令。可以进行封装上传组件之类的 const throttleHaveParam = { inserted: function(el, binding) { let timeout el.addEventListener('input', function() { const _this = this; const args = arguments; if (!timeout) { timeout = setTimeout(() =&g...
vue 组件之间的通信 非业务性组件不应该依赖 vuex
qq_40774743的博客
11-13 144
vue 组件之间的通信。（非业务性组件。不应依赖vuex） 或者 自己管理好自己。 provide/inject 祖先组件中通过provider来提供变量，然后在孙组件中通过inject来注入变量 procide/inject API主要解决了跨域组件间的通讯问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系 下边通过一个例子来说明provide/inject的用法： 父组件 <template> <div> .
vue sync 修饰符 vue2.23 重新引入了
qq_40774743的博客
04-18 111
这篇博客 已经写的很清楚了， 但是还需要补充一点。 https://www.jianshu.com/p/6b062af8cf01 感谢！ 具体小坑如下图：
每周一组件之- MP3组件的自我管理
qq_40774743的博客
12-28 109
<template> <div class="player"> <audio class="hidden" ref="audio" @pause="pause" @play="play" @timeupdate="updateTime" @ended="ended" :src="src" controls="controls" controlslist="nodownload"></audio> <div @click="paly
class="dialog-tabs el-tabs el-tabs--left"
08-30
class="dialog-tabs el-tabs el-tabs--left" 是用于添加样式的类名，在element ui的el-dialog组件中使用el-tabs组件时，可以通过添加这个类名来指定对话框中的选项卡组件的样式和布局。这个类名的具体样式定义可以在引用中的common.scss文件中找到。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决 el-dialog 里嵌入 el-tabs 卡死的问题](https://blog.csdn.net/weixin_48549175/article/details/122350100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-dialog el-tabs结合样式改造](https://blog.csdn.net/xuxu_qkz/article/details/81114568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决vue中el-tab-pane切换的问题](https://download.csdn.net/download/weixin_38636577/13128606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值