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)]
index.playchrome如果在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, 地址放到下面了. 最后希望更多的人可以加入我们花果山团队一起为开源做贡献.
https://github.com/hug-sun/element3/issues