Bootstrap

第二篇：自定义组件——购物车控件

本文将结合案例，来阐述自定义组件实现。 点击我查看完整项目

先来上图

这个是一个购物车的数量组件。主要思路： 1、可以手动的输入具体的数量 2、可自定义设置最小值、和最大值。当是最小值时，“-”号置灰，并不可点击。当是最大值时，“+”号置灰，并不可点击。 3、当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字。 4、当手动输入数字大于最大值时，输入框失去焦点，默认将输入值置为最大值。或者当手动输入数字小于最小值时，输入框失去焦点，默认将输入值置为最小值 5、如果属性值minNum最小值、或者maxNum最大值设置为NaN，则表示最小值和最大值的大小没有输入的限制 6、默认最小值和最大值是没有限制的，可以随便输入

一、使用自定义组件的方式

1、js文件中：

输入框数值变化最终响应的函数
  showNumber: function (e) {
    var num = e.detail.num
  },
复制代码

2、json文件中：

{
  "usingComponents": {
    /**
    *  key:自定义组件的别名，在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间
    *  value: 自定义组件的全路径
    */
    "component-option-num": "/component/optionNumber-component/optionNumber-component"
  }
}
复制代码

3、wxml文件中：

 1、这里设置了最小值是0，最大值是20。
 2、bindoptionNum：是由bind+"optionNum"自定义组件回调函数的名称组成。当自定义组件的函数回调是，这个属性指定的方法bindoptionNum将被响应。并可以获取传入的值
 <component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>
复制代码

一、自定义组件的定义

1、 对外提供的自定义属性值

  /**
   * 组件的属性列表
   */
  properties: {
  //最小值
     minNum:{
       type:Number,
       value: NaN
     },
//最大值
     maxNum:{
       type:Number,
       value:NaN
     },
  },
复制代码

2、 组件内部使用的数据

  /**
   * 组件的初始数据
   */
  data: {
    num: 0,                //输入框显示的数量
    disabledMin: false,    //"-"是否可点击，true 不能点击
    disabledMax:false    //"+"是否可点击，true 不能点击
  },
复制代码

3、 增加数量方法

   _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 })
    },

复制代码

4、减少数量

    _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})
    },
复制代码

5、手动输入数量

    _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 })
    },
复制代码

6、失去焦点

  _blur:function(e){
      let val = e.detail.value
      let num = val.replace(/^[0]+[0-9]*$/gi, "")
      let disabledMin, disabledMax
      if (this.checkIsMinNum(num)) {    //输入的数量 小于最小的数，则输入框显示最小值
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(num)) {     //输入的数量 大于最大的数，则输入框显示最大值
        this.data.disabledMax = true
        num = this.data.maxNum
        disabledMin = false
        disabledMax = true
      } else {     //输入的数量 大于最小的数，则输入框显示输入值
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
      this.triggerEvent('optionNum', { num: num })
    },
复制代码

附自定义组件的全部代码

1、js中的代码
// component/optionNumber-component/optionNumber-component.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
     minNum:{
       type:Number,
       value: NaN
     },

     maxNum:{
       type:Number,
       value:NaN
     },
  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 0,
    disabledMin: false,
    disabledMax:false
  },

  lifetimes:{
    // 初始化数据
    attached:function(){
      let num, disabledMin, disabledMax
      if (this.checkIsMinNum(this.data.num)) { //小于最小数
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(this.data.num)){     //大于最大数
        num = this.data.maxNum
        disabledMax = true
        disabledMin = false
      }else {
        num = this.data.num
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
    },
  },


  /**
   * 组件的方法列表
   */
  methods: {
    // 减少数量
    _reduce: function (e) {
      // console.log("_reduce======", this.data.maxNum)
      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
      })
      // console.log("disabledMin======", this.data.disabledMin)
      this.triggerEvent('optionNum',{num:num})
    },

    // 增加数量
    _add: function (e) {
      let num = parseInt(this.data.num) + 1
      // console.log("_add======", this.data.maxNum)
      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
      })
      this.triggerEvent('optionNum', { num: num })
    },


    // 手动输入数量
    _input: function (e) {
      let val = e.detail.value
      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 })
    },

  // 失去焦点
    _blur:function(e){
      // console.log("_confirm======")
      let val = e.detail.value
      let num = val.replace(/^[0]+[0-9]*$/gi, "")
      let disabledMin, disabledMax
      if (this.checkIsMinNum(num)) {    //输入的数量 小于最小的数，则输入框显示最小值
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(num)) {     //输入的数量 大于最大的数，则输入框显示最大值
        this.data.disabledMax = true
        num = this.data.maxNum
        disabledMin = false
        disabledMax = true
      } else {     //输入的数量 大于最小的数，则输入框显示输入值
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
      this.triggerEvent('optionNum', { num: num })
    },

    // 检查是否是最大数
    checkIsMaxNum: function (checkNum) {
      return this.data.maxNum != "NaN" && checkNum >= this.data.maxNum
    },
    // 检查是否是最小数
    checkIsMinNum: function (checkNum) {
      return this.data.minNum != "NaN" && checkNum <= this.data.minNum
    }
  }
})

复制代码
2、wxml中的代码
<view class='optionView'>
  <button class="item" bindtap="_reduce" disabled="{{disabledMin}}" style="border:0;background:white" plain='true'>
    <image class="imgReduce" src="{{disabledMin ? '/images/icon/ic_reduce_grey.png' : '/images/icon/ic_reduce.png'}}"></image>
  </button>
  <view class="space">|</view>
  <view class="item">
    <input class="inputNum" type='number' maxlength='3' bindinput="_input" value="{{num}}" placeholder="0" confirm-type="确认" bindblur="_blur" placeholder-style="font-size:26rpx;color:#C81432"></input>
  </view>
  <view class="space">|</view>
  <button class="item" bindtap="_add" disabled="{{disabledMax}}" style="margin-left:6rpx;border:0;background:white" plain='true'>
    <image class="imgAdd" src="{{disabledMax ? '/images/icon/ic_add_grey.png' : '/images/icon/ic_add.png'}}"></image>
  </button>
</view>
复制代码
3、wxss中的代码
.optionView{
  height: 58rpx;
  width: 240rpx;
  display: flex;
  flex-direction: row;
  border: 1rpx solid #999;
  border-radius: 10rpx;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  background: white;
  margin-right: 64rpx;
}

.item{
  flex: 1;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}
.space{
  height: 40rpx;
  width: 1rpx;
  color:  #999;
  font-size: 30rpx;
}
.imgAdd{
  width: 16rpx;
  height: 16rpx;
  padding-top: 14rpx;
  padding-bottom: 14rpx
}
.imgReduce{
  width: 16rpx;
  height: 3.5rpx;

  padding-top: 18rpx;
  padding-bottom: 18rpx
}
.inputNum{
    width: 70rpx;
    color: #C81432;
    font-size: 26rpx;
    text-align: center;
    padding-left: 10rpx;
    padding-right: 10rpx;
}
.textMax{
  margin-top: 45rpx;
  margin-bottom: 36rpx;
}
复制代码
4、json中的代码
{
  "component": true,
  "usingComponents": {}
}
复制代码

转载于:https://juejin.im/post/5b9ccf5d6fb9a05cf908219b

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
【Git-驯化】一文搞懂git中rm命令的使用技巧
nvue和vue的区别
创意无限！AI绘画、ChatGPT、AIGC工具合集，让你的创作梦想成真
Pytest如何并发执行自动化脚本
SpringCloud Sentinel 服务治理详解
3. 响应状态码及Response对象的status_code属性
PDF怎么编辑修改内容？分享两种编辑修改方法
苍穹外卖项目DAY10
读懂Word2Vec之Skip-Gram
JVM GC 调优命令看这一篇就够了
;