從零擼一個pc端vue的ui組件庫(計數器組件)

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

創新互聯建站主要從事網站設計制作、成都網站制作、網頁設計、企業做網站、公司建網站等業務。立足成都服務大通,十余年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18982081108

1:需求分析

每次+1 -1是常態, 但是如果搞活動, 每次最少為+-2個或三個, 就要兼容一下了,( 舉一個實際遇到的坑, 我們之前把用戶限制為每次活動, 每個用戶只能買2個, 但是沒有做好防備, 導致用戶可能這次只買一個, 而下次他再次購買的時候會提示每次只能買兩個, 但顯示他只點擊了買一個, 因為他已經買過一個, 為了兼容這個問題, 搞得還要加莫名其妙的補救代碼 )
中間的顯示區應該可輸入的, 用戶想買1000個不可能讓他+1+1+1..., 某些組件采用的是, 平時其為div, 點擊之后變為input, 個人感覺完全沒必要, 一個元素就夠了, 何必搞兩個元素, input狀態下把他的默認樣式去掉就好了.
左右兩邊要有限制, 很多時候會有限購一說, 比如我做的商城, 庫存只有10個或者單個用戶最多購買3個, 最少買兩個等等限制.
小數位數的顯示一說... 這個其實我還真遇到過, 有一種需求叫做, 只要涉及數字就必須精確到后兩位, 這種需求會導致后臺同學對數據庫做一定的限制, 從而我們傳給后臺的數據也就存在限制了.

2: 基本結構:

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

從零擼一個pc端vue的ui組件庫( 計數器組件 )

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

<template>
 <div class="cc-input-number">
 // 左側的':heavy_minus_sign:'符號
 <div class="cc-input-number__reduce">
  // 自己封裝的icon組件, 出鏡率還挺高:smirk_cat:.
  <cc-icon name='cc-reduce2'/>
 </div>
 // 中間的顯示與輸入部分,讓人又愛又恨的number屬性
 // 下面的屬性就能干掉凡人的上下按鈕
 // input::-webkit-outer-spin-button,
 // input::-webkit-inner-spin-button {
 // -webkit-appearance: none;
 // }
 <input ref="input"
   type="number"
   class="cc-input-number__input">
 <div class="cc-input-number__add">
  <cc-icon name='cc-add2'/>
 </div>
 </div>
</template>

這里我們選擇吧input與button放在一個div里面, 且同級別這種方式, 與其他的不太一樣, 因為這樣更直觀, 而且也足夠實現我想要的功能.

3: 事件的綁定

// 減少
 <div class="cc-input-number__reduce"
   @click='reduce'>
 // 增加
<div class="cc-input-number__add"
   @click="add">
// 輸入框的監控
<input ref="input"
  type="number"
  class="cc-input-number__input"
  @input="inputChange($event)">

這里我們有個問題, 就是本組件采用的是v-model的形式編寫, v-model有一些弊端, 在測試的時候我發現, 比如說用戶為多個組件綁定了相同的v-model會導致無限渲染的bug, 下面會解讀解決這類bug的相關代碼.

prpos

props: {
 max: { type: Number }, // 數字不傳默認是undefined
 min: { type: Number },
 step: { // 每次計算的單位
  type: Number,
  default: 1
 },
 value: { 
 // 綁定的數值, 這里允許兩種type, 為了方便用戶書寫,具體判斷下面我們自己寫
  type: [String, Number],
  required: true
 },
 precision: { // 顯示小數點后幾位數
  type: Number,
  validator(value) {
  if (value < 1 || value === undefined) {
   return 1;
  } else {
   return parseInt(value);
  }
  }
 }
 },

add 方法的實現

add() {
// 很可能用戶就輸入了一個string屬性, 
// 1: 比如后臺返回的就是字符串;
// 2: input框輸入的就是字符串類型;
// 3: 用v-model綁定了同樣的值的其他組件賦予了這個值string類型;
 let num = Number(this.value) + this.step; // 加上固定的長度
// 這里我們抽象出一個專門負責數值的變化的函數
 this.emitVal(num);
},

reduce 方法的實現

reduce() {
  let num = Number(this.value) - this.step;
  this.emitVal(num);
 },

監聽input框的輸入事件

inputChange(e) {
// 這里就有可能出現string類型的了
  this.emitVal(Number(e.target.value));
 },

關鍵性的賦值函數

emitVal

emitVal(newVal) {
  let { max, min } = this;
  // 不傳參數的時候默認值就是undefined
  // 對這個值的限制就是, max之內, min以上
  if (max !== undefined && newVal > max) newVal = max;
  if (min !== undefined && newVal < min) newVal = min;
  // 這里兼容一下位數控制
  let value = Number(newVal).toFixed(this.precision);
  // 這個oldVal下面會解釋:point_down:
  if (value === this.oldVal) return;
  this.oldVal = ls;
  // 發出兩個事件, 一個負責改變value, 一個負責返回給用戶
  // 畢竟用戶不可能監聽input事件然后再把值附上去, 太麻煩
  this.$emit("input", value);
  this.$emit("change", value);
  // 這一步很重要
  // 下面會詳細說
  this.$refs.input.value = value;
 }

上面遺留的問題,這里解釋一下.

oldVal: 能防止很多多余的改變, 比如說用戶復制粘貼了一組數進來, 這個數大于max, 但是當時顯示的數值就是max, 所以就不用渲染了, 或者v-model不止綁定了這個組件, 還綁定了其他各種組件, 導致值超出范圍, 這邊也會進行相應的限制, 而這個oldVal 就是上一個合法的值, 所以在做完檢測之后, 檢測通過的數值要賦值給他.

this.$refs.input.value = value; 這一步看似很沒用, 因為輸入框里面的是value, value改變input里面的值自然會改變, 但是實際測試并不是這樣, 問題也是出現在v-model上, 綁定很多的時候會出現值的不改變, 可能是vue的機制問題, 而且他要放在 this.$emit(....);下面操作, 如果放在上面會導致多次執行, 因為他的執行會循環觸發input的監聽事件, 多次試驗之后, 還是放在這里沒有bug.
上面的兩個問題都是涉及到v-model的問題, 下面還有一個同類的問題, 我們來看看.

對value進行的監控

因為value的變化, 不一定全是通過+-輸入這三種方式, 還有第三方通過v-model的方式, 還有用戶手動亂填的方式.

watch: {
 value: {
  handler() {
  // 為了解決, 多組件共同v-model采用的這個方法, 也算是另辟蹊徑了
  let { value, time } = this;
  clearTimeout(time);
  // 畢竟把它放入宏任務Macrotasks可以躲過很多無限循環.
  time = setTimeout(() => {
   if (value !== undefined) this.emitVal(value);
  });
  },
  // 這個是開啟進頁面的瞬間就出發一次的意思, 很有用, 但是數據稍大會消耗性能, 慎用
  // watch還有一個deep屬性, 更是吃性能吃的厲害, 可以深度監控里面的數據
  immediate: true
 }
 }

上面的問題都是基于v-model的, 所以很早就有人剔除雙向綁定的壞處, 封裝越多的組件感覺就越明顯.

4: 關于樣式的判定

在計算屬性里面我們隊當前值進行了監控, 返回的是置灰的顏色, 這個讓用戶自定的意義不大, 所以直接寫了.

computed: {
 valueMin() {
  if (this.value === this.min) return "#bbbbbb";
  return "";
 },
 valueMax() {
  if (this.value === this.max) return "#bbbbbb";
  return "";
 }
 },

dom, 點擊到了最大值的話就會置灰, 我們上面已經阻止了繼續點擊的渲染

<cc-icon size='25px'
   name='cc-add2'
   :color="valueMax" />

做點有意思的事

slot是個自由度很高的標簽

把左右按鈕都包上, 讓用戶可以自己定義顯示的標簽是什么樣子的

<div class="cc-input-number__reduce"
   @click='reduce'>
  <slot name='left'>
  <cc-icon size='25px'
     name='cc-reduce2'
     :color='valueMin' />
  </slot>
 </div>
vue-cc-ui/src/style/inputNumber.scss

@import './common/var.scss';
@import './common/extend.scss';
@import './common/mixin.scss';
@import './config/index.scss';

@include b(input-number) {
// 友好的小手
 cursor: pointer;
 // 有個放大動畫, 看過我文章的同學都知道, 操作類的組件, 我喜歡有一個懸停放大效果.
 transition:all .1s;
 align-items: center;
 display: inline-flex;
 background-color: white;
 &:hover {
 // 放大被其他組件擋住就劃不來了
  z-index: 6;
  transform: scale(1.2);
 }
 // 招牌陰影
 @include commonShadow($--color-black);
 @include e(add) {
  @include flexCenter();
  padding: 4px 6px;
 }
 @include e(reduce) {
  @include flexCenter();
  padding: 4px 6px;
 }
 @include e(input) {
 // 去掉輸入框的默認樣式
  border: none;
  outline:none;
  display: block;
  text-align: center;
  width:60px;
  height: 20px;
 }
}

效果展示

從零擼一個pc端vue的ui組件庫( 計數器組件 )