网站开发 方案 报价单,自己学做网站需要学多久,网站的超级链接怎么做,网站开发需求ppt目录 基本使用
#步长设置
#限制输入范围
#限制只能输入整数
#禁用
#固定小数位数
#异步变更
#自定义颜色和大小
#自定义 slot
API
#Props
#Events
#Slots 基本使用
通过v-model绑定value初始值#xff0c;此值是双向绑定的#xff0c;无需在回调中将返回的数值重…
目录 基本使用
#步长设置
#限制输入范围
#限制只能输入整数
#禁用
#固定小数位数
#异步变更
#自定义颜色和大小
#自定义 slot
API
#Props
#Events
#Slots 基本使用
通过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)}}}
/script#步长设置
通过step属性设置每次点击增加或减少按钮时变化的值默认为1下面示例每次都会加2或者减2
u-number-box :step2/u-number-box#限制输入范围
通过min和max参数限制输的入值最小值和最大值
u-number-box :min1 :max100/u-number-box#限制只能输入整数
通过integer限制输入类型
u-number-box integer/u-number-box#禁用
!-- 通过设置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-box#固定小数位数
通过step设置步进长度decimal-length设置显示小数位数
u-number-box step0.25 decimal-length1 /u-number-box#异步变更
通过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)}}
}
/script#自定义颜色和大小
通过button-size参数设置按钮大小通过icon-style参数设置加减按钮图标的样式
u-number-box button-size36color#ffffffbgColor#2979fficonStylecolor: #fff
/u-number-box#自定义 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
API
#Props
参数说明类型默认值可选值name步进器标识符在change回调返回String | Number--value用于双向绑定的值初始化时设置设为默认min值(最小值)String | Number1-min用户可输入的最小值String | Number1-max用户可输入的最大值String | NumberNumber.MAX_SAFE_INTEGER-step步长每次加或减的值 支持小数值如需小数String | Number1-integer是否只能输入正整数Booleanfalsetruedisabled是否禁用操作包括输入框加减按钮BooleanfalsetruedisabledInput是否禁止输入框BooleanfalsetrueasyncChange是否开启异步变更开启后需要手动控制输入值BooleanfalsetrueinputWidth输入框宽度单位pxString | Number35-showMinus是否显示减少按钮BooleantruefalseshowPlus是否显示增加按钮BooleantruefalsedecimalLength显示的小数位数String | Number--longPress是否允许长按进行加减Booleantruefalsecolor输入框文字和加减按钮图标的颜色String#323233-buttonSize按钮大小宽高等于此值单位px输入框高度和此值保持一致String | Number30-bgColor输入框和按钮的背景颜色String#EBECEE-cursorSpacing指定光标于键盘的距离避免键盘遮挡输入框单位pxString | Number100-disablePlus是否禁用增加按钮BooleanfalsetruedisableMinus是否禁用减少按钮BooleanfalsetrueiconStyle加减按钮图标的样式String--
#Events
事件名说明回调参数focus输入框得到焦点触发(按钮可点击情况下)对象形式value输入框当前值name步进器标识符blur输入框失去焦点时触发对象形式value输入框当前值name步进器标识符change输入框内容发生变化时触发对象形式value输入框当前值name步进器标识符overlimit超过范围阈值时触发typeminus已达最小值plus已达最大值
#Slots
名称说明minus减少按钮input输入框plus增加按钮
