[vue]vantUI使用实例

简介

---

vantUI是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。



VantUI官网：https://vant-contrib.gitee.io/vant/#/zh-CN/

api：https://youzan.github.io/vant/#/zh-CN/pull-refresh

安装

---

npm i vant -S

引用

---

import Vant from 'vant'
improt 'vant/lib/index.css';
Vue.use(Vant);

在Vue组件中使用
让我们来简单的写一个简单的进步器DEMO吧

---

    


效果如下：

图片：QQ截图20210928210523.png

是不是简单方便又好看呢
开发中熟读vantUI的API是必须的，这能让我们的开发更加得心应手

---

API



Props

v-model	当前输入值	number | string	-
min	最小值	number | string	1
max	最大值	number | string	-
default-value	初始值，当 v-model 为空时生效	number | string	1
step	步长，每次点击时改变的值	number | string	1
name v2.2.11	标识符，可以在change事件回调参数中获取	number | string	-
input-width	输入框宽度，默认单位为px	number | string	32px
button-size v2.0.5	按钮大小以及输入框高度，默认单位为px	number | string	28px
decimal-length v2.2.1	固定显示的小数位数	number | string	-
integer	是否只允许输入整数	boolean	false
disabled	是否禁用步进器	boolean	false
disable-plus v2.2.16	是否禁用增加按钮	boolean	false
disable-minus v2.2.16	是否禁用减少按钮	boolean	false
disable-input	是否禁用输入框	boolean	false
async-change	是否开启异步变更，开启后需要手动控制输入值	boolean	false
show-plus v2.1.2	是否显示增加按钮	boolean	true
show-minus v2.1.2	是否显示减少按钮	boolean	true
long-press v2.4.3	是否开启长按手势	boolean	true

Events

change	当绑定值变化时触发的事件	value: 当前组件的值, detail: 额外信息，包含 name 的字段
overlimit	点击不可用的按钮时触发	-
plus	点击增加按钮时触发	-
minus	点击减少按钮时触发	-
focus	输入框聚焦时触发	event: Event
blur	输入框失焦时触发	event: Event