uni-app H5 钉钉 中使用vant-weapp注意事项

1 篇文章 0 订阅
1 篇文章 0 订阅
  1. 需要下载vant的weapp版源码,将dist目录复制到uniapp项目中,路径:项目/wxcomponents/vant

  2. 引入后hbuilderx会自动给每个组件生成一个vue文件,但是会包一层uni-shadow-root,如果同时使用uni官方的组件且是通过easycom的custom使用的,则会冲突,需要将正则改为^uni-((?!(shadow-root)).*)
    "custom": { "^uni-((?!(shadow-root)).*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue", "^van-(.*)": "@/wxcomponents/vant-dist/$1/index.vue" }

  3. 如果报了vant的css错误(Unclosed bracket),则全局搜索 .woff ,把所有的 ‘url’ 字段前加一个空格,不管是wxss还是vue里。在 vant/icon/index.vue 或者 wxss里面
    @font-face{font-weight:400;font-family:vant-icon;font-style:normal;font-display:auto;src: url(https://img01.yzcdn.cn/vant/vant-icon-f463a9.woff2) format(“woff2”), url(https://img01.yzcdn.cn/vant/vant-icon-f463a9.woff) format(“woff”), url(https://img01.yzcdn.cn/vant/vant-icon-f463a9.ttf) format(“truetype”)}.van-icon{position:relative;

  4. vant的组件无法直接使用v-model,因为uni会自动给事件的值套一层,可以自己再封装一层处理。

  5. vant的组件(如:button)无法直接使用click事件,需要添加.native装饰器

  6. 在直接使用vant的组件时要注意,由于自动生成的vue组件包了一层,在组件上添加的class会没有效果,需要通过/deep/重写内部样式

  7. hbuilderx会给wxcomponents下的组件在每次运行的时候自动生成/重置index.vue,所以每次修改里面的组件时,原文件和index.vue都要修改

  8. 在APP中如果要使用本地字体文件,可以到vant的icon样式复制相关的src并修改本地vant的icon目录下的index.wxss里的src

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

躺平,睡觉

苦逼三线前端,给点支持吧。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值