typora-copy-images-to: image
问题
请跳转 Issue 查看 bug-el-input组件bug · Issue #434 · hug-sun/element3 (github.com)
问题重现
我们将他的实例demo复制到examples/play/index.vue
里执行yarn dev:play
运行来查看问题。
[图片上传失败...(image-48fbb2-1607426459401)]
然后我们在输入框输入任意字符,然后BUG重现了,下面两个el-input
我们应该是给v-show=false
,但是v-show=false
突然不生效了???
然后我们查看一下dom元素
What 发现style消失了??
这是什么情况
知识补充
v-show原理
在分析问题之前我们先了解一下v-show
的实现的原理
首先我们看一下官方的文档
[图片上传失败...(image-288057-1607426459402)]
我们发现v-show
是将组件内的根元素的style
的display
设置成为'none'来实现hide的效果
TIP: 这里需要注意,因为vue3可以通过fragment让你在template里放多个元素,但是这里需要注意,如果你在template里放了多个元素,在组件上使用v-show的时候,他是没有效果的!!!
不光是v-show没有效果,style属性也是没有效果的如:
[图片上传失败...(image-8a57fb-1607426459402)]
如果在test.vue template 内套一个div他就有效果了
[图片上传失败...(image-fd343a-1607426459402)]
style的绑定
style的动态绑定有三种方法
第一种:
style可以传入一个数组,数组的每个元素是css样式字符串或者对象。
第二种:
style可以传入一个对象,对象的key是css的属性,value是css的值。
第三种:
直接在style里绑定一个字符串变量,注意这种方法会覆盖之前的静态内联样式
而静态绑定可以直接的在style里写内联样式
这里需要注意的是动态绑定和静态内联样式是可以搭配使用的
$attrs.style
this.$attrs里是父组件给子组件传过来的属性,不过这个属性没有在props里定义,所以他就被$attars接收了.
问题分析
现在我们开发分析问题,首先看一下el-input
组件的源码
[图片上传失败...(image-637fe5-1607426459402)]
当我打开Input.vue
的时候我的直觉感觉第4行代码有问题。
而且第4行代码完全没有必要,按照刚刚的原理得知,在使用ElInput
组件的时候直接写一个style
是可以直接将style
传给内部的更元素的
问题就是出现在了这里,因为这里的:style="$attrs.style"
是通过第三种方法进行style的动态绑定的,但是v-show=false
在第一次加载组件的时候会讲style
设置一个display:none
用户在第一个el-input内输入值的时候会更新当前组件(这里是play/index.vue)内的所有元素,在更新组件的时候vue会将$attrs.style的值拿出来,然后赋值给这个div的style,但是现在父组件没有传入style这个属性,所以$attrs.style
就是undefined
,又因为是使用第三种动态绑定,undefined
就覆盖了原来内联样式(如果传入的style是undefined或null他会删掉style这个属性,这里可以看源码),所以BUG出现了.
问题分析完成,我们修改代码测试一下
因为他这里的$attts.style
的目的是为了实现将外面的内联样式应用到这个div, 但是之前也分析了,vue默认是将父组件的传入的style的值赋给内部的第一个元素. 所以我们可以直接删除这句话也是可以实现他的目的的,然后我们就试一下.
[图片上传失败...(image-2f6127-1607426459402)]
[图片上传失败...(image-5bb4f2-1607426459402)]
ok成功,BUG修复完成
最后
遇到问题, 我们首先是按照自己的现有的知识去思考他的问题, 在遇到知识的盲区后, 我们首先去查官方文档, 然后在google, 实在是解决不了问题可以去提交issue来问问题, element3 的issue不止是可以问项目的问题也可以问js的问题, 所以大家一定要多提交Issue, 地址放到下面了. 最后希望更多的人可以加入我们花果山团队
一起为开源做贡献.