在uniapp中使用VantUI组件库(微信版)

今后刚睡醒

已于 2024-03-29 16:07:46 修改

阅读量2k

点赞数 1

文章标签： uni-app 前端微信小程序

于 2022-11-08 11:06:53 首次发布

本文链接：https://blog.csdn.net/weixin_48888726/article/details/127746805

版权

在uniapp中使用VantUI微信版UI库

1、安装和引入
2、使用

1、安装和引入

在根目录下创建wxcomponents/vant目录,并在https://github.com/youzan/vant-weapp下载最新的zip压缩包，解压放入

在这里插入图片描述

在App.vue中引入UI样式

@import "/wxcomponents/vant/dist/common/index.wxss";

2、使用

在组件对应的pages.json中，引入需要使用的组件

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "当前页名称",
				"usingComponents": {
					"van-action-sheet": "/wxcomponents/vant/dist/action-sheet/index",
					"van-uploader": "/wxcomponents/vant/dist/uploader/index"
			}
		}
	}
]

参照VantUI官网语法进行使用

<van-uploader :file-list="fileList" max-count="1" accept='image' :multiple='true' :deletable='true' capture="['album','camera']" @after-read="afterRead" @delete='deleteImg' />