电商网站报价,wordpress网站建设教程视频,博客建站模板,seo网站编辑专业该组件一般用于商城购物选择物品数量的场景
注意#xff1a;该输入框只能输入大于或等于0的整数
#平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√√√
#基本使用
通过v-model绑定value初始值#xff0c;此值是双向绑定的该输入框只能输入大于或等于0的整数
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过v-model绑定value初始值此值是双向绑定的无需在回调中将返回的数值重新赋值给value。
templateu-number-box v-modelvalue changevalChange/u-number-box
/templatescriptexport default {data() {return {value: 0}},methods: {valChange(e) {console.log(当前值为: e.value)}}}
/scriptcopy
#步长设置
通过step属性设置每次点击增加或减少按钮时变化的值默认为1下面示例每次都会加2或者减2
u-number-box :step2/u-number-boxcopy
#限制输入范围
通过min和max参数限制输的入值最小值和最大值
u-number-box :min1 :max100/u-number-boxcopy
#限制只能输入整数
通过integer限制输入类型
u-number-box integer/u-number-boxcopy
#禁用
!-- 通过设置disabled参数来禁用输入框禁用状态下无法点击加减按钮或修改输入框的值 --
u-number-box :disabledtrue/u-number-box!-- 禁用输入框 --
u-number-box :disabledInputtrue/u-number-box!-- 禁用增加按钮 --
u-number-box :disablePlustrue/u-number-box!-- 禁用减少按钮 --
u-number-box :disableMinustrue/u-number-box!-- 禁用长按 --
u-number-box :longPressfalse/u-number-boxcopy
#固定小数位数
通过step设置步进长度decimal-length设置显示小数位数
u-number-box step0.25 decimal-length1 /u-number-boxcopy
#异步变更
通过asyncChange设置异步变更开启后需要手动控制输入值 默认 false
templateu-number-box v-modelvalue :asyncChangetrue changeonChange/u-number-box
/templatescript
export default {data(){return {value:1}},methods:{onChange(e){setTimeout(() {this.value this.value 1;}, 3000)}}
}
/scriptcopy
#自定义颜色和大小
通过button-size参数设置按钮大小通过icon-style参数设置加减按钮图标的样式
u-number-box button-size36color#ffffffbgColor#2979fficonStylecolor: #fff
/u-number-boxcopy
#自定义 slot
templateu-number-box v-modelvalueviewslotminusclassminusu-iconnameminussize12/u-icon/viewtextslotinputstylewidth: 50px;text-align: center;classinput{{value}}/textviewslotplusclassplusu-iconnamepluscolor#FFFFFFsize12/u-icon/view/u-number-box
/templatescript
export default {data(){return {value:1}}
}
/scriptstyle langscss.minus {width: 22px;height: 22px;border-width: 1px;border-color: #E6E6E6;border-style: solid;border-top-left-radius: 100px;border-top-right-radius: 100px;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;include flex;justify-content: center;align-items: center;}.input {padding: 0 10px;}.plus {width: 22px;height: 22px;background-color: #FF0000;border-radius: 50%;/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;align-items: center;}
/style
