ybjames
贫民
贫民
  • 最后登录2021-09-29
  • 发帖数2
阅读:232回复:0

[vue]vantUI使用实例

楼主#
更多 发布于:2021-09-28 21:32
简介
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
游客


返回顶部

公众号

公众号