您好,欢迎访问一九零五行业门户网

uniapp可以用vant吗

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吗的详细内容。
其它类似信息

推荐信息