本篇文章給大家帶來的內容是關于小程序自定義組件的實現（案例解析），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

本文將結合案例，來闡述自定義組件實現。
先來上圖

這個是一個購物車的數量組件。主要思路：
1、可以手動的輸入具體的數量
2、可自定義設置最小值、和最大值。當是最小值時，“-”號置灰，并不可點擊。當是最大值時，“+”號置灰，并不可點擊。
3、當手動輸入“0”開頭的數字時，自行過濾，禁止輸入，只值輸入非0數字。
4、當手動輸入數字大于最大值時，輸入框失去焦點，默認將輸入值置為最大值。或者當手動輸入數字小于最小值時，輸入框失去焦點，默認將輸入值置為最小值
5、如果屬性值minNum最小值、或者maxNum最大值設置為NaN，則表示最小值和最大值的大小沒有輸入的限制
6、默認最小值和最大值是沒有限制的，可以隨便輸入

輸入框數值變化最終響應的函數  showNumber: function (e) {    var num = e.detail.num  },

{  "usingComponents": {    /**    *  key:自定義組件的別名，在使用組件時用到。相當于Android自定義控件在xml文件中的申明的命名空間    *  value: 自定義組件的全路徑    */    "component-option-num": "/component/optionNumber-component/optionNumber-component"  }}

1、這里設置了最小值是0，最大值是20。
2、bindoptionNum：是由bind+"optionNum"自定義組件回調函數的名稱組成。當自定義組件的函數回調是，這個屬性指定的方法bindoptionNum將被響應。并可以獲取傳入的值

<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>

  /**   * 組件的屬性列表   */  properties: {  //最小值     minNum:{       type:Number,       value: NaN     },//最大值     maxNum:{       type:Number,       value:NaN     },  },

  /**   * 組件的初始數據   */  data: {    num: 0,                //輸入框顯示的數量    disabledMin: false,    //"-"是否可點擊，true 不能點擊    disabledMax:false    //"+"是否可點擊，true 不能點擊  },

   _add: function (e) {      let num = parseInt(this.data.num) + 1      if (this.checkIsMaxNum(num)) {            /**       * 大于最大數值，將輸入框的值設置為最大值，       * 且"+"不能點擊、"-"可點擊       */         num = this.data.maxNum        this.data.disabledMax = true         this.data.disabledMin = false      }else {        this.data.disabledMin = false        this.data.disabledMax = false       }      this.setData({        num: num,        disabledMin: this.data.disabledMin,        disabledMax: this.data.disabledMax      })      //回調optionNum方法，將輸入框num值傳遞給使用該組件的函數      this.triggerEvent('optionNum', { num: num })    },

    _reduce: function (e) {      let num, disabledMin, disabledMax      num = parseInt(this.data.num) - 1      if (this.checkIsMinNum(num)) { //小于最小數       /**     * 小于最小數值，將輸入框的值設置為最小值，     * 且"-"不能點擊、"+"可點擊     */         num = this.data.minNum        disabledMin = true        disabledMax = false      }else{        disabledMin = false        disabledMax = false      }      this.setData({        num: num,        disabledMin: disabledMin,        disabledMax: disabledMax      })      //回調optionNum方法，將輸入框num值傳遞給使用該組件的函數      this.triggerEvent('optionNum',{num:num})    },

    _input: function (e) {      let val = e.detail.value      //1、先用正則校驗輸入的第一個數字，當手動輸入“0”開頭的數字時，自行過濾，禁止輸入，只值輸入非0數字      var num = val.replace(/^[0]+[0-9]*$/gi, "")       /**     * 大于最大數值，將輸入框的值設置為最大值，且"+"不能點擊、"-"可點擊。反之亦然     */       if (this.checkIsMinNum(num)) {  //小于最小數        this.data.disabledMin = true        this.data.disabledMax = false      } else if (this.checkIsMaxNum(num)) {    //大于最大數        this.data.disabledMax = true        this.data.disabledMin = false      } else {        this.data.disabledMin = false        this.data.disabledMax = false      }      this.setData({        num: num,        disabledMin: this.data.disabledMin,        disabledMax:this.data.disabledMax      })      this.triggerEvent('optionNum', { num: num })    },              
              

            
購物車,數量組件