本文将结合案例，来阐述自定义组件实现。点击我查看完整项目
先来上图
自定义控件.png
这个是一个购物车的数量组件。主要思路：
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": {}
}
