這里分享一個(gè)工作中 一個(gè)寫的一個(gè)正整數(shù)input輸入框
業(yè)務(wù)場景：新建的模具修改單栓辜，里面需要填寫模具的變更壽命，因此需要寫正整數(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的方法，方法用途是把值取整八千，簡單說下this.$emit('input)這個(gè)事件就上面所說到自定義組件的v-model用法
在看看在父組件里面是怎么使用的吗讶，通過import導(dǎo)入intInput。
在父組件的components里面加入intInput就好了恋捆。
那現(xiàn)在拿到intInput組件和配置好了照皆，那該怎么使用呢？其實(shí)很簡單沸停，只需要在html里面加入<intInput></intInput>一對(duì)標(biāo)簽就好了膜毁，在這里要提醒一點(diǎn)就是標(biāo)簽最好根據(jù)駝峰的規(guī)則，要寫成<int-input></int-input>愤钾。下面就是直接在父組件里面的寫法瘟滨，傳入最大最小值，傳入綁定的值能颁。
這樣就完成了一個(gè)很簡單的小組件
下面補(bǔ)充一個(gè)輸入數(shù)字的只能為多少位的input代碼杂瘸，也是因?yàn)闃I(yè)務(wù)需要。規(guī)定只要2位小數(shù)伙菊，所以又多寫了一個(gè)組件
html代碼有點(diǎn)修改败玉，增加了disabled的屬性，樣式也借用了餓了么UI
再看script(參數(shù)就多了一個(gè)浮點(diǎn)的長度：floatLength來控制多少位小數(shù)占业，默認(rèn)是兩位小數(shù))
這里的方法也基本沒什么改變绒怨，只是里面的小數(shù)點(diǎn)邏輯變了而已
哈纯赎，最后覺得這個(gè)對(duì)你有用的話谦疾，給我點(diǎn)個(gè)贊，當(dāng)做支持吧犬金，謝謝
