uni-app中使用vant注意事项

最新推荐文章于 2024-05-17 03:57:31 发布
最新推荐文章于 2024-05-17 03:57:31 发布
阅读量6.4k 收藏 11
点赞数 5
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soooyoung/article/details/110876596
版权
  1. 需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant
  2. 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).*)
  3. 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn/vant/vant-icon-d3825a.woff，把所有的url前加一个空格，不管是wxss还是vue里。
  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
最低0.47元/天 解锁文章
soooyoung
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 1911
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
vant-image在uni-app下报错，Invalid handler for event “load“ Invalid handler for event “error“
Bitter的博客
10-17 1944
vant ui h5环境。vant-image会报错，源码中，vant-image里面有onLoad和onError方法。但是断点调试的时候,this.onLoad是undefined。可能被uni-app干掉了。 解决方法： vant在uniapp总是有各种小问题，尽量不要在uniapp中的环境下使用。 ...
uniapp 全局引入vant 组件库_uniapp vant
最新发布
m0_61068088的博客
05-17 1286
最全的Linux教程，Linux从入门到精通第一份《Linux从入门到精通》466页内容简介====本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。
Uni-app使用vant和uview组件
市民景先生
02-23 1655
小程序能使用vant-weapp组件，且官网的安装是直接导入小程序中，不能直接导入uni-app框架中。easycom是一种引入规则，不需要导包就可以使用。1.3.创建uni-app项目。在pages.json引入对应。讲里面的组件引入自己新创建的。如果没有pages.json。文件中且必须是这个名字。在main.js中引入。再github上下载。
uniapp项目h5端使用vant组件
jdsfui的博客
01-19 7239
在做uniapp项目时由于vant组件小程序和h5组件是不通用的，所以vant组件在h5中要单独引用。 1.首先使用npm i @vant/weapp -S --production 安装vant的组件包，安装成功后结构目录如下 2.我们在全局中引用vant组件，找到main.js文件，在文件中添加一下代码 import Vant from 'vant'; import { Toast } from 'vant'; Vue.use(Vant); 3.进行了以上操作后我们只需要在所用到的页面中直接使用组件
uniapp 组件内onLoad里调用的方法不执行
qwyio的博客
05-19 2078
问题背景： 考虑到代码的复用性，对部分代码进行了封装，在组件内去初始化接口数据，却迟迟没有接口响应，经过最终的排查，发现问题出现在uniapp的生命周期上。 uniapp官方文档上明确写出：uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。组件里没有页面级的onLoad等生命周期 uni-app的组件中可以直接使用Vue的生命周期函数进行处理 解决方案： 使用vue的生命周期函数 mounted mounted(){ } ...
uni-app 请求拦截器
11-11
uni-app 请求拦截器
修改后的能够在uniapp项目中使用的 Vantweapp
07-24
解压当前压缩包，直接放在uniapp项目wxcomponents目录 引用即可 修改后的Vantweapp在uniapp项目里使用不会报错 修改里面的px单位为微信小程序里的rpx 已在发布的微信小程序里使用
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
vant-demo：vant演示集
02-04
│ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 Vue 3、Vant 3、Vue Cli 搭建应用 │ ├── vite 使用 Vue 3、Vant 3、Vite 搭建应用 │ ├── cdn 通过 CDN 引入 Vant │
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
uni-app入门:小程序UI组件Vant Weapp
weixin_43401380的博客
11-29 1858
uni-app入门实战:小程序UI组件Vant Weapp的使用与说明
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 4940
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
uniapp使用vant ui方式
u013141712的专栏
06-15 889
参考链接： https://www.jianshu.com/p/5dcada1d8f8d 里面github参考：
记录uniapp集成vant遇到的问题
lin13958756858的博客
12-10 1696
需求：用uniapp做h5开发，需要用到第三方UI库。 步骤： 1.vant下载地址：GitHub - youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 2.复制UI库：将下载或者clone下来的dist文件悉数拷到uniapp创建的根目录下的wxcomponents 【ps:wxcomponents此文件需要自己手动创建，且名称不能更改，具体看uni-app官网】，此处我的目录结构为下图所示 3.引入UI库：首先在app.vue文件里面 @import "/w.
uniapp中使用vant wappp
m0_70647189的博客
05-09 1201
 <style lang="scss"> .custom-button { .van-button { background-color: blue; border-radius: 10px; } } </style> 如果你的style样式中存在scoped，我们可以利用vue中的语法，加个/deep/进行样式覆盖，如下所示：  <style lang="scss" scoped>
vue同时安装element-ui和vant-ui
weixin_42776027的博客
02-28 4213
从本质上来说想用多少个库都是可以的，cdn方式是通过引入外部的style和script文件，比如可以添加一堆框架库工具和UI组件库，每个框架本身都使用了命名空间隔离避免污染全局空间，一般不太需要考虑冲突，比如像jquery的$，lodash的_(另外他们本身也定义了避免命名冲突的方法)；组件框架iview的ivu、vant-ui的van-前缀和element-ui的el-前缀都是一种特定避免冲突的命名空间。而使用工程化模块化的方式引入npm包，比cdn方式更优的是可以使用模块化的方式按需加载，可以减轻资源大
表单验证与输入框的clearable属性冲突的问题
weixin_39944879的博客
07-27 885
vue表单验证与输入框的clearable属性冲突的问题 当表单验证里添加dialog时，里面的输入框的clearable属性会产生两个XX，去掉表单验证clearable会恢复正常
Vue进阶（幺伍捌）：vue 组包 CssSyntaxError unclosed bracket 错误解决方法
IT全栈 华强工作室
09-27 5352
在Vue项目npm run build过程中，突然爆出CssSyntaxError unclosed bracket的错误提示，一脸懵，好好的项目怎么楚然就出幺蛾子了呢？ 奇怪的是项目执行npm run dev命令时，可正常运行，而pro版本跟dev的版本中差了一个optimize-css-assets-webpack-plugin这个文件的引用，所以在把webpack.prod.conf.js中的使用找到该文件引用处： 首先将上述组件引用注释掉,然后执行npm run build,build成功，随后就很
uni-app如何使用vant的Dialog
10-13
要在uni-app中使用vant的Dialog，需要先安装vant组件库并引入Dialog组件。具体步骤如下： 1. 在uni-app项目根目录下执行以下命令安装vant组件库： ``` npm install vant -S ``` 2. 在需要使用Dialog的页面中引入Dialog组件： ```vue <template> <view> <van-button @click="showDialog">显示Dialog</van-button> <van-dialog v-model="show" title="标题" message="这是一段内容"></van-dialog> </view> </template> <script> import { Dialog } from 'vant'; export default { components: { [Dialog.name]: Dialog }, data() { return { show: false }; }, methods: { showDialog() { this.show = true; } } }; </script> ``` 3. 在需要使用Dialog的页面中引入Dialog组件的样式： ```vue <style> @import "~vant/lib/dialog/style"; </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值