W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
步進(jìn)器由增加按鈕、減少按鈕和輸入框組成,用于在一定范圍內(nèi)輸入、調(diào)整數(shù)字
import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);
通過(guò)v-model綁定輸入值,可以通過(guò)change事件監(jiān)聽(tīng)到輸入值的變化
<van-stepper v-model="value" />
export default {
data() {
return {
value: 1
}
}
}
通過(guò)step屬性設(shè)置每次點(diǎn)擊增加或減少按鈕時(shí)變化的值,默認(rèn)為1
<van-stepper v-model="value" step="2" />
通過(guò)min和max屬性限制輸入值的范圍
<van-stepper v-model="value" min="5" max="8" />
設(shè)置integer屬性后,輸入框?qū)⑾拗浦荒茌斎胝麛?shù)
<van-stepper v-model="value" integer />
通過(guò)設(shè)置disabled屬性來(lái)禁用步進(jìn)器,禁用狀態(tài)下無(wú)法點(diǎn)擊按鈕或修改輸入框
<van-stepper v-model="value" disabled />
通過(guò)設(shè)置disabled-input屬性來(lái)禁用輸入框,此時(shí)按鈕仍然可以點(diǎn)擊
<van-stepper v-model="value" disabled-input />
通過(guò)設(shè)置decimal-length屬性可以保留固定的小數(shù)位數(shù)
<van-stepper v-model="value" step="0.2" :decimal-length="1" />
通過(guò)input-width屬性設(shè)置輸入框?qū)挾?,通過(guò)button-size屬性設(shè)置按鈕大小和輸入框高度
<van-stepper v-model="value" input-width="40px" button-size="32px" />
如果需要異步地修改輸入框的值,可以設(shè)置async-change屬性,并在change事件中手動(dòng)修改value
<van-stepper
:value="value"
async-change
@change="onChange"
/>
import { Toast } from 'vant';
export default {
data() {
return {
value: 1
}
},
methods: {
onChange(value) {
Toast.loading({ forbidClick: true });
setTimeout(() => {
Toast.clear();
// 注意此時(shí)修改 value 后會(huì)再次觸發(fā) change 事件
this.value = value;
}, 500);
}
}
}
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前輸入值 | number | string | - |
min | 最小值 | number | string | 1 |
max | 最大值 | number | string | - |
default-value | 初始值,當(dāng) v-model 為空時(shí)生效 | number | string | 1 |
step | 步長(zhǎng),每次點(diǎn)擊時(shí)改變的值 | number | string | 1 |
name v2.2.11 | 標(biāo)識(shí)符,可以在change 事件回調(diào)參數(shù)中獲取 | number | string | - |
input-width | 輸入框?qū)挾?,默認(rèn)單位為px | number | string | 32px |
button-size v2.0.5 | 按鈕大小以及輸入框高度,默認(rèn)單位為px | number | string | 28px |
decimal-length v2.2.1 | 固定顯示的小數(shù)位數(shù) | number | string | - |
integer | 是否只允許輸入整數(shù) | boolean | false |
disabled | 是否禁用步進(jìn)器 | boolean | false |
disable-plus v2.2.16 | 是否禁用增加按鈕 | boolean | false |
disable-minus v2.2.16 | 是否禁用減少按鈕 | boolean | false |
disable-input | 是否禁用輸入框 | boolean | false |
async-change | 是否開(kāi)啟異步變更,開(kāi)啟后需要手動(dòng)控制輸入值 | boolean | false |
show-plus v2.1.2 | 是否顯示增加按鈕 | boolean | true |
show-minus v2.1.2 | 是否顯示減少按鈕 | boolean | true |
long-press v2.4.3 | 是否開(kāi)啟長(zhǎng)按手勢(shì) | boolean | true |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
change | 當(dāng)綁定值變化時(shí)觸發(fā)的事件 | value: 當(dāng)前組件的值, detail: 額外信息,包含 name 的字段 |
overlimit | 點(diǎn)擊不可用的按鈕時(shí)觸發(fā) | - |
plus | 點(diǎn)擊增加按鈕時(shí)觸發(fā) | - |
minus | 點(diǎn)擊減少按鈕時(shí)觸發(fā) | - |
focus | 輸入框聚焦時(shí)觸發(fā) | event: Event |
blur | 輸入框失焦時(shí)觸發(fā) | event: Event |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: