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

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

每次+1 -1是常態, 但是如果搞活動, 每次最少為+-2個或三個, 就要兼容一下了,( 舉一個實際遇到的坑, 我們之前把用戶限制為每次活動, 每個用戶只能買2個, 但是沒有做好防備, 導致用戶可能這次只買一個, 而下次他再次購買的時候會提示每次只能買兩個, 但顯示他只點擊了買一個, 因為他已經買過一個, 為了兼容這個問題, 搞得還要加莫名其妙的補救代碼 )

中間的顯示區應該可輸入的, 用戶想買1000個不可能讓他+1+1+1..., 某些組件采用的是, 平時其為div, 點擊之后變為input, 個人感覺完全沒必要, 一個元素就夠了, 何必搞兩個元素, input狀態下把他的默認樣式去掉就好了.

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

小數位數的顯示一說... 這個其實我還真遇到過, 有一種需求叫做, 只要涉及數字就必須精確到后兩位, 這種需求會導致后臺同學對數據庫做一定的限制, 從而我們傳給后臺的數據也就存在限制了.

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

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