typora-copy-images-to: image
問題
請?zhí)D(zhuǎn) Issue 查看 bug-el-input組件bug · Issue #434 · hug-sun/element3 (github.com)
問題重現(xiàn)
我們將他的實(shí)例demo復(fù)制到examples/play/index.vue里執(zhí)行yarn dev:play運(yùn)行來查看問題。
[圖片上傳失敗...(image-48fbb2-1607426459401)]
然后我們在輸入框輸入任意字符，然后BUG重現(xiàn)了，下面兩個(gè)el-input我們應(yīng)該是給v-show=false，但是v-show=false突然不生效了？？？
然后我們查看一下dom元素
What 發(fā)現(xiàn)style消失了？？
這是什么情況
知識補(bǔ)充
v-show原理
在分析問題之前我們先了解一下v-show的實(shí)現(xiàn)的原理
首先我們看一下官方的文檔
[圖片上傳失敗...(image-288057-1607426459402)]
我們發(fā)現(xiàn)v-show是將組件內(nèi)的根元素的style的display設(shè)置成為'none'來實(shí)現(xiàn)hide的效果
TIP: 這里需要注意，因?yàn)関ue3可以通過fragment讓你在template里放多個(gè)元素，但是這里需要注意，如果你在template里放了多個(gè)元素，在組件上使用v-show的時(shí)候，他是沒有效果的?。?！
不光是v-show沒有效果，style屬性也是沒有效果的如：
[圖片上傳失敗...(image-8a57fb-1607426459402)]
index.playchrome如果在test.vue template 內(nèi)套一個(gè)div他就有效果了
[圖片上傳失敗...(image-fd343a-1607426459402)]
style的綁定
style的動(dòng)態(tài)綁定有三種方法
第一種：
style可以傳入一個(gè)數(shù)組，數(shù)組的每個(gè)元素是css樣式字符串或者對象。
第二種：
style可以傳入一個(gè)對象，對象的key是css的屬性，value是css的值。
第三種：
直接在style里綁定一個(gè)字符串變量，注意這種方法會覆蓋之前的靜態(tài)內(nèi)聯(lián)樣式
而靜態(tài)綁定可以直接的在style里寫內(nèi)聯(lián)樣式
這里需要注意的是動(dòng)態(tài)綁定和靜態(tài)內(nèi)聯(lián)樣式是可以搭配使用的
$attrs.style
this.$attrs里是父組件給子組件傳過來的屬性，不過這個(gè)屬性沒有在props里定義，所以他就被$attars接收了.
問題分析
現(xiàn)在我們開發(fā)分析問題，首先看一下el-input組件的源碼
[圖片上傳失敗...(image-637fe5-1607426459402)]
當(dāng)我打開Input.vue的時(shí)候我的直覺感覺第4行代碼有問題。
而且第4行代碼完全沒有必要，按照剛剛的原理得知，在使用ElInput組件的時(shí)候直接寫一個(gè)style是可以直接將style傳給內(nèi)部的更元素的
問題就是出現(xiàn)在了這里，因?yàn)檫@里的:style="$attrs.style"是通過第三種方法進(jìn)行style的動(dòng)態(tài)綁定的，但是v-show=false在第一次加載組件的時(shí)候會講style設(shè)置一個(gè)display:none
用戶在第一個(gè)el-input內(nèi)輸入值的時(shí)候會更新當(dāng)前組件（這里是play/index.vue）內(nèi)的所有元素，在更新組件的時(shí)候vue會將$attrs.style的值拿出來，然后賦值給這個(gè)div的style，但是現(xiàn)在父組件沒有傳入style這個(gè)屬性,所以$attrs.style就是undefined,又因?yàn)槭鞘褂玫谌N動(dòng)態(tài)綁定,undefined就覆蓋了原來內(nèi)聯(lián)樣式(如果傳入的style是undefined或null他會刪掉style這個(gè)屬性，這里可以看源碼),所以BUG出現(xiàn)了.
問題分析完成，我們修改代碼測試一下
因?yàn)樗@里的$attts.style的目的是為了實(shí)現(xiàn)將外面的內(nèi)聯(lián)樣式應(yīng)用到這個(gè)div, 但是之前也分析了,vue默認(rèn)是將父組件的傳入的style的值賦給內(nèi)部的第一個(gè)元素. 所以我們可以直接刪除這句話也是可以實(shí)現(xiàn)他的目的的,然后我們就試一下.
[圖片上傳失敗...(image-2f6127-1607426459402)]
[圖片上傳失敗...(image-5bb4f2-1607426459402)]
ok成功,BUG修復(fù)完成
最后
遇到問題, 我們首先是按照自己的現(xiàn)有的知識去思考他的問題, 在遇到知識的盲區(qū)后, 我們首先去查官方文檔, 然后在google, 實(shí)在是解決不了問題可以去提交issue來問問題, element3 的issue不止是可以問項(xiàng)目的問題也可以問js的問題, 所以大家一定要多提交Issue, 地址放到下面了. 最后希望更多的人可以加入我們花果山團(tuán)隊(duì)一起為開源做貢獻(xiàn).
