uni-app中使用vant注意事项
- 需要下载vant的weapp版源码,将dist目录复制到uniapp项目中,路径:
项目/wxcomponents/vant - 引入后hbuilderx会自动给每个组件生成一个vue文件,但是会包一层
uni-shadow-root,如果同时使用uni官方的组件且是通过easycom的custom使用的,则会冲突,需要将正则改为^uni-((?!(shadow-root)).*) - 如果报了vant的css错误(
Unclosed bracket),则全局搜索https://img.yzcdn.cn/vant/vant-icon-d3825a.woff,把所有的url前加一个空格,不管是wxss还是vue里。 - vant的组件无法直接使用v-model,因为uni会自动给事件的值套一层,可以自己再封装一层处理。
- vant的组件(如:button)无法直接使用click事件,需要添加
.native装饰器 - 在直接使用vant的组件时要注意,由于自动生成的vue组件包了一层,在组件上添加的class会没有效果,需要通过
/deep/重写内部样式 - hbuilderx会给wxcomponents下的组件在每次运行的时候自动生成/重置index.vue,所以每次修改里面的组件时,原文件和index.vue都要修改
- 在APP中如果要使用本地字体文件,可以到vant的icon样式复制相关的src并修改本地vant的icon目录下的index.wxss里的src
field
- 在使用
left-icon的插槽时,原来的写法<slot name="left-icon" slot="icon"></slot>在uni里没有效果,需要改成<view slot="icon"><slot name="left-icon"></slot></view>,注意:wxml和vue都要改 - 在field中,只对value的做了赋值,没有对innerValue赋值,导致clearable等功能会出现异常,所以需要在给value赋值时也得手动给innerValue赋值
- field没有监听value的变化,需要通过ref调用setValue更新值