uniapp是可以用vant的,因为vant ui有h5版和微信小程序版,而从“uni-app2.4.7”起,h5和qq小程序也支持了微信小程序组件,其使用方法是在“pages.json”的“globalstyle”中引入所需要的组件即可。
本教程操作环境:windows7系统、uni-app2.5.1版本,dell g3电脑。
推荐(免费):uni-app教程
uni-app使用vant组件
前言vant ui有h5版和微信小程序版。其h5版只能用于h5,其微信小程序版(vant weapp)可用于微信和app,从uni-app 2.4.7起,h5和qq小程序也支持了微信小程序组件。
使用步骤下载代码
在项目根目录下新建 wxcomponents 目录 ,此目录应该与components 目录同级。
直接通过 git 下载 vant-weapp 最新源代码,并将dist目录拷贝到新建的wxcomponents目录下,并重命名dist为vant-weapp。
在pages.json的globalstyle中 引入所需要的组件
试试是否成功
<template> <p> <van-picker v-if="flag" :columns="columns" @change="changepicker" /> <van-button @click="show">显示</van-button> </p></template><script>export default { data() { return { columns: [杭州, 宁波, 温州, 嘉兴, 湖州], flag: false }; }, methods: { show() { console.log(1 =, show); this.flag = !this.flag; }, changepicker(event) { console.log(1 =, event); } }};</script>
注意事项vant组件中notify 消息提示比较特殊
不仅需要在pages.json的globalstyle中 引入还需要再main.js中添加到vue原型上
//main.jsimport notify from './wxcomponents//vant/notify/notify';vue.prototype.$notify = notify
然后在页面中使用
<template> <view> <van-button @click="shownotify">弹出提示</van-button> <van-notify id="van-notify" /> </view></template><script>export default { methods: { shownotify() { this.$notify({ type: danger, message: 通知内容 }); } }};</script>
以上就是uniapp可以用vant吗的详细内容。