這里分享一個(gè)工作中 一個(gè)寫的一個(gè)正整數(shù)input輸入框
業(yè)務(wù)場(chǎng)景：新建的模具修改單，里面需要填寫模具的變更壽命，因此需要寫正整數(shù)。
說組件前，先分享一下自定義組件的?v-model，因?yàn)樵谝窒淼慕M件里面就用到了自定義組件的v-model。
為啥要用自定義組件的v-model，因?yàn)槟J(rèn)情況下，一個(gè)組件的?v-model?會(huì)使用?value?prop 和?input?事件。但是諸如單選框、復(fù)選框之類的輸入類型可能把?value?用作了別的目的。model?選項(xiàng)可以避免這樣的沖突。
其實(shí)v-model這個(gè)是一個(gè)語法糖。這個(gè)具體是什么意思，自行百度。
下面介紹自定義組件
先看html代碼
在input標(biāo)簽上面綁定了一個(gè)val屬性值，這個(gè)屬性值是根據(jù)父組件傳遞進(jìn)來的value去賦值的。還綁定了一個(gè)handleChange的方法，當(dāng)input值改變時(shí)就會(huì)觸發(fā)這方法
再看script
這里面有3個(gè)屬性是從父組件傳遞過來的值，一個(gè)是值的多少：value，定義類型為字符串和數(shù)字；一個(gè)是最大值：max，定義類型為數(shù)字；一個(gè)是最小值：min，定義類型為數(shù)字。還有定義了一個(gè)handleChange的方法，方法用途是把值取整，簡(jiǎn)單說下this.$emit('input)這個(gè)事件就上面所說到自定義組件的v-model用法
在看看在父組件里面是怎么使用的，通過import導(dǎo)入intInput。
在父組件的components里面加入intInput就好了。
那現(xiàn)在拿到intInput組件和配置好了，那該怎么使用呢？其實(shí)很簡(jiǎn)單，只需要在html里面加入<intInput></intInput>一對(duì)標(biāo)簽就好了，在這里要提醒一點(diǎn)就是標(biāo)簽最好根據(jù)駝峰的規(guī)則，要寫成<int-input></int-input>。下面就是直接在父組件里面的寫法，傳入最大最小值，傳入綁定的值。
這樣就完成了一個(gè)很簡(jiǎn)單的小組件
下面補(bǔ)充一個(gè)輸入數(shù)字的只能為多少位的input代碼，也是因?yàn)闃I(yè)務(wù)需要。規(guī)定只要2位小數(shù)，所以又多寫了一個(gè)組件
html代碼有點(diǎn)修改，增加了disabled的屬性，樣式也借用了餓了么UI
再看script(參數(shù)就多了一個(gè)浮點(diǎn)的長(zhǎng)度：floatLength來控制多少位小數(shù)，默認(rèn)是兩位小數(shù))
這里的方法也基本沒什么改變，只是里面的小數(shù)點(diǎn)邏輯變了而已
哈，最后覺得這個(gè)對(duì)你有用的話，給我點(diǎn)個(gè)贊，當(dāng)做支持吧，謝謝
