vue-cli3-element-ui 开发项目中遇到的坑以及解
前言
小编在开发新项目中,pc端用的是vuecli3+element-ui
,移动端用的是vue-cli3+vant-ui
或者vue-cli3+mint-ui
,在这篇文章就把在开发pc端项目中也就是使用vuecli3+element-ui
过程中遇到的坑和解决方案记录下来,方便后续自己学习。
目前使用的element-ui版本是
2.15.1
,这里记录版本的原因是,之前用过低版本遇到的坑发现后来随着element-ui版本的更新给优化了,所以这里记录一下版本号。
step一,首先说一下我遇到过的随着版本被优化的点
1,在版本2.9.2
之前Cascader 级联选择器
是不支持多选的,那是时候就是自己手写了一个多选的,详情请移步vue-element-ui-Cascader 级联选择器支持多选---折腾记但是在该版本之后element-ui
新增了级联多选。
step二,记录一下踩过得坑和解决方案。
1,el-form
表单和input输入框失焦也就是@blur
事件和button的click事件冲突,解决方案请移步
vue-使用el-form表单时blur事件和button的点击事件冲突的解决方案
2, el-input-number
计数器的v-model
与直接在input框内输入值不是双向绑定的,解决方案移步
el-input-number直接在输入框输入内容v-model的值不会跟着改变
3,el-collapse
折叠面板在苹果浏览器多次点击的情况下出现多出来的三条灰色的线,详情请移步
记录网页在safari浏览器的不兼容问题
4,el-input-number
计数器在safari浏览器下点击左右加减按钮时会出现浅蓝色或者灰色背景块,(之前在网上找的那些什么类似于-webkit-tap-highlight-color: transparent;
这样的解决方案都试过了,都没有用),所以目前还未找到解决方案。
注:
safari.pngelement-ui
官方文档在safari浏览器也会出现这种情况。
5,vue-element-ui-el-table
切换表格数据时@current-change
方法失效,详情请移步
vue-cli element-ui table 表格分页功能切换数据后@current-change失效的解决方案