vant步进器传值_Vant Stepper 步进器
介绍
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字
引入import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);
代码演示
基础用法
通过v-model绑定输入值,可以通过change事件监听到输入值的变化export default {
data() {
return {
value: 1
}
}
}
步长设置
通过step属性设置每次点击增加或减少按钮时变化的值,默认为1
限制输入范围
通过min和max属性限制输入值的范围
限制输入整数
设置integer属性后,输入框将限制只能输入整数
禁用状态
通过设置disabled属性来禁用步进器,禁用状态下无法点击按钮或修改输入框
禁用输入框
通过设置disabled-input属性来禁用输入框,此时按钮仍然可以点击
固定小数位数
通过设置decimal-length属性可以保留固定的小数位数
自定义大小
通过input-width属性设置输入框宽度,通过button-size属性设置按钮大小和输入框高度
异步变更
如果需要异步地修改输入框的值,可以设置async-change属性,并在change事件中手动修改value
: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();
// 注意此时修改 value 后会再次触发 change 事件
this.value = value;
}, 500);
}
}
}
API
Props参数说明类型默认值v-model当前输入值number | string-
min最小值number | string1
max最大值number | string-
default-value初始值,当 v-model 为空时生效number | string1
step步长,每次点击时改变的值number | string1
name v2.2.11标识符,可以在change事件回调参数中获取number | string-
input-width输入框宽度,默认单位为pxnumber | string32px
button-size v2.0.5按钮大小以及输入框高度,默认单位为pxnumber | string28px
decimal-length v2.2.1固定显示的小数位数number | string-
integer是否只允许输入整数booleanfalse
disabled是否禁用步进器booleanfalse
disable-plus v2.2.16是否禁用增加按钮booleanfalse
disable-minus v2.2.16是否禁用减少按钮booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更,开启后需要手动控制输入值booleanfalse
show-plus v2.1.2是否显示增加按钮booleantrue
show-minus v2.1.2是否显示减少按钮booleantrue
long-press v2.4.3是否开启长按手势booleantrue
Events事件名说明回调参数change当绑定值变化时触发的事件value: 当前组件的值, detail: 额外信息,包含 name 的字段
overlimit点击不可用的按钮时触发-
plus点击增加按钮时触发-
minus点击减少按钮时触发-
focus输入框聚焦时触发event: Event
blur输入框失焦时触发event: Event
vant步进器传值_Vant Stepper 步进器相关推荐
- vant步进器传值_Vant Uploader 文件上传
Vant Uploader 文件上传 Vant Uploader 文件上传组建主要实现手机端上传文件功能. 引入import Vue from 'vue'; import { Uploader } f ...
- vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器 实现功能 每日推荐 私人FM 歌单广场 排行榜 歌手 歌曲播放 mv播放 上下滑动切换 云盘上传 用户登录 歌单创 ...
- WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果 2.相关知识点 2.1 片元着色器中的uniform变量 2.2 gl.getUniformLocation()方法 ...
- WebGL编程指南03-在javaScript程序通过uniform变量向片元着色器传值
1.demo效果 如上图,这个demo实现在黑色区域内点用鼠标点击,会在不同的区域画出不同颜色的小方块,第一象限的画红色方块,第三象限画绿色方块,第二.四象限画蓝色方块. 2 片元着色器的unifor ...
- 装饰器python与python装饰器
n.迭代,迭代器,生成器,详解传送门: https://blog.csdn.net/weixin_54217632/article/details/117674316 n.1.python 闭包和装饰 ...
- Java web:基于jieba分词器(或ansj分词器)的文章关键词字符云(词云图)
上来先丢一个展示图,吸引一下注意力(跑. 上图为对某论文用jieba分词后,计算其逆文档频率(TF-IDF)作为权重,并用echarts的字符云扩展包echarts-wordcloud画出来的字符云图 ...
- C++——包装器std::function与绑定器std::bind
C++--包装器std::function与绑定器std::bind 1.可调用对象的包装器 std::function是可调用对象的包装器.它是一个类模板,可以容纳除了类成员(函数)指针之外的所有可 ...
最新文章
- Art Generation with Neural Style Transfer-v2
- CF294C Shaass and Lights(排列组合)
- 矩阵论基础知识4——强大的矩阵奇异值分解(SVD)及其应用
- 在虚拟机中ftp服务器的配置,ftp服务器在虚拟机中配置文件
- IOS第12天(3,UIViewController的生命周期)
- long 和 Object的相互转换
- python如何读取csv文件中的某一张表_python 读取csv文件中某一段月份中的数据?...
- 指标公式c语言源码下载,通达信超级厉害指标公式源码附图-通达信公式-公式指标网...
- 2015中国(深圳)互联网金融创新峰会暨第二届云海汇梦想年会圆满成功
- html5银行理财项目实践作业,金融理财产品实践报告.doc
- 1020寒星孤月-蛇形矩阵
- 极光Im + layIm 实现后台聊天
- html注册新浪邮箱代码,JS仿新浪邮箱点击联系人添加Email地址
- Java配置文件找不到指定,使用@ContextConfiguration注解后,提示找不到配置文件
- 使用树莓派+arduino+采集卡+frp实现异地控制电视机顶盒
- 数据结构 -- 数组+链表 HashMap
- Zemax光学设计(十一) —— 扫描系统设计
- 什么是spring?spring组成模块、spring优缺点、应用场景、bean的生命周期、线程并发问题
- 创龙TL437x-EVM评估板规格书详解
- 计算机和应用数学博士,中国农业大学理学院 各系介绍 应用数学系