摘要：第十集從零開始實(shí)現(xiàn)計(jì)數(shù)器組件本集定位聽到計(jì)數(shù)器這個(gè)名字很多人是不是一瞬間沒有什么印象畢竟這個(gè)組件用的比較少就是那種左邊一個(gè)右邊一個(gè)控制某些數(shù)量的時(shí)候才會(huì)用到比如我之前做的商城小程序只有下單頁面的規(guī)格彈出框里面才有他的身影如果是涉及到處理商

本集定位:
聽到計(jì)數(shù)器這個(gè)名字很多人是不是一瞬間沒有什么印象, 畢竟這個(gè)組件用的比較少,就是那種左邊一個(gè)"-"右邊一個(gè)"+", 控制某些數(shù)量的時(shí)候才會(huì)用到, 比如我之前做的商城小程序只有"下單"頁面的規(guī)格彈出框里面才有他的身影, 如果是涉及到處理商品數(shù)量很頻繁的業(yè)務(wù)場(chǎng)景應(yīng)該會(huì)很常見吧, 但是不要看這個(gè)組件小, 編寫它的時(shí)候坑還不少, 本次我們就來做一個(gè)計(jì)數(shù)器, 目標(biāo)就是盡可能小, 盡可能的省性能.

每次+1 -1是常態(tài), 但是如果搞活動(dòng), 每次最少為+-2個(gè)或三個(gè), 就要兼容一下了,( 舉一個(gè)實(shí)際遇到的坑, 我們之前把用戶限制為每次活動(dòng), 每個(gè)用戶只能買2個(gè), 但是沒有做好防備, 導(dǎo)致用戶可能這次只買一個(gè), 而下次他再次購(gòu)買的時(shí)候會(huì)提示每次只能買兩個(gè), 但顯示他只點(diǎn)擊了買一個(gè), 因?yàn)樗呀?jīng)買過一個(gè), 為了兼容這個(gè)問題, 搞得還要加莫名其妙的補(bǔ)救代碼 )

中間的顯示區(qū)應(yīng)該可輸入的, 用戶想買1000個(gè)不可能讓他+1+1+1..., 某些組件采用的是, 平時(shí)其為div, 點(diǎn)擊之后變?yōu)閕nput, 個(gè)人感覺完全沒必要, 一個(gè)元素就夠了, 何必搞兩個(gè)元素, input狀態(tài)下把他的默認(rèn)樣式去掉就好了.

左右兩邊要有限制, 很多時(shí)候會(huì)有限購(gòu)一說, 比如我做的商城, 庫存只有10個(gè) 或者單個(gè)用戶最多購(gòu)買3個(gè), 最少買兩個(gè)等等限制.

小數(shù)位數(shù)的顯示一說... 這個(gè)其實(shí)我還真遇到過, 有一種需求叫做, 只要涉及數(shù)字就必須精確到后兩位, 這種需求會(huì)導(dǎo)致后臺(tái)同學(xué)對(duì)數(shù)據(jù)庫做一定的限制, 從而我們傳給后臺(tái)的數(shù)據(jù)也就存在限制了.

先展示一章普通狀態(tài)的圖, 讓我們更直觀的去完成它, 造型比較別致, 是本套組件的一個(gè)特點(diǎn), 哈哈做的與別人一樣會(huì)導(dǎo)致思想的禁錮, 自己寫代碼多嘗試新的東西, 但是工作中一定要中規(guī)中矩, 以公司條款為準(zhǔn)則.

vue-cc-ui/src/components/InputNumber/index.js

import inputNumber from "./main/input-number.vue"

inputNumber.install = function(Vue) {
  Vue.component(inputNumber.name, inputNumber);
};

export default inputNumber

vue-cc-ui/src/components/InputNumber/main/input-number.vue