Uniapp 导入 Vant 组件库
2021/5/30 10:24:26
本文主要是介绍Uniapp 导入 Vant 组件库,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Uniapp 导入 Vant 组件库
Vant Weapp
开发文档
Vant Weapp - 轻量、可靠的小程序 UI 组件库
创建 wxcomponents 目录
在 uniapp 项目的根目录下,创建一个新的 wxcomponents
目录
下载 vant-weapp 项目
$ git clone git@gitee.com:vant-contrib/vant-weapp.git
下载下来后,把 vant-weapp 项目下的 dist
目录整个拷贝到上面新建的目录 wxcomponets
中,并把 dist
目录改名为 vant
pages.json 引入组件
在 uniapp 项目的 pages.json 文件中的 globalStyle
属性中使用 usingComponents
引入 vant 组件
"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "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", "van-image": "/wxcomponents/vant/image/index", "van-row": "/wxcomponents/vant/row/index", "van-col": "/wxcomponents/vant/col/index", "van-popup": "/wxcomponents/vant/popup/index", "van-toast": "/wxcomponents/vant/toast/index" }
使用 vant 组件
在页面中使用组件
<view> <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> </view>
引入 vant 样式
在 App.vue
文件中的 style 处增加 vant 样式
<style> /*每个页面公共css */ @import '/wxcomponents/vant/common/index.wxss'; </style>
导入后,就可以在页面中使用 vant 的样式了
<view class="van-ellipsis"> 这是一段宽度限制 250px 的文字,后面的内容会省略。 </view>
这篇关于Uniapp 导入 Vant 组件库的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?