前言
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本
Vue3安装
1 | npm install vant --save |
安装为Vant的最新版，与Vue3适配；而是vue2项目需指定版本号为v2，否则会出错
若出错需要卸载 npm uninstall vant ，重新安装
Vue2安装
@ 指定最新的版本号
1 | npm i vant@latest-v2 -S |
main引入
在main.js文件中
1、全局全部引入：
1 2 3 4 5 6 7 8 9 10 11 12 13 | import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Antd);// 根据本地localStorage存储的当前语言类型，切换不同语言import zhCN from 'vant/es/locale/lang/zh-CN'import enUS from 'vant/es/locale/lang/en-US'let lang = localStorage.getItem('lang') || 'zh_CN'if (lang === 'en') { Locale.use('en-US', enUS)} else { Locale.use('zh-CN', zhCN)} |
2、全局按需引入：
- 在src目录创建plugins文件夹
- 文件夹中创建vant.js文件做引入操作，
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import Vue from 'vue'// 在这里引入你所需的组件import { Button, Cell, CellGroup, Icon // 。。。} from 'vant'// 按需引入UI组件Vue.use(Button)Vue.use(Cell)Vue.use(CellGroup)Vue.use(Icon) // 。。。 |
- 将这个文件在man.js内引入
1 2 3 4 5 6 7 8 9 10 | import Vue from 'vue'import App from './App.vue'import '@/plugins/vant'// 其他操作...new Vue({ router, render: h => h(App),}).$mount('#app') |
简单使用
例子：vant折叠面板
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <div class="result-list"> <span class="status-name"></span><span class="status-name">列名1</span><span class="status-name">列名2</span><span class="status-name">列名3</span><span class="status-name">列名4</span><div class="list-content"> <div class="list-item-title"> <img decoding="async" class="title-icon" src="../../assets/images/xxx.png" alt="icon"></div> <div class="list-item-title de-list-title-big"> {{ item.className }} </div> <div class="list-item-title">{{ item.notSubmitted }}</div> <div class="list-item-title">{{ item.positiveNum }}</div> <div class="list-item-title"> {{ item.positivePercentage }} </div> <div class="list-item-title success-result"> {{ item.totalNumber }} </div> <div class="item-detail"> <div class="item-content">下拉内容1</div> <div class="item-date"> {{ item.content }} </div> <div class="item-content">下拉内容2</div> <div class="item-date"> {{ item.content }} </div> <div class="item-content">下拉内容3</div> <div class="item-date"> {{ item.content }} </div> <div class="item-content">下拉内容4</div> <div class="item-date"> {{ item.content }} </div> </div> </div> </div> |
这里是引用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | .result-list { min-height: 520px; padding: 17px; background-color: #c2e2ff; position: relative;}.list-status { float: right; height: 24px; width: 100%; font-size: 12px; text-align: start; margin-right: 20px; /* line-height: 12px; */ color: RGBA(0, 0, 0, 0.4);}// 整个底部列表.list-content { clear: both; // border: 1px solid red;}// 整个item（包括title和detail）.content-item { margin-bottom: 10px; border-radius: 10px; overflow: hidden;}.item-icon { align-self: center;}// 每一项的item的title.item-title { // border: 1px solid red; text-align: start; font-size: 14px; font-weight: 500; color: #f36292;}.list-item-title { // border: 1px solid yellow; height: 36px; line-height: 36px; position: relative;}.title-icon { width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}// 每一项的item的detail.item-detail { // border: 1px solid red; padding-top: 10px; text-align: center; .item-content { font-size: 12px; font-weight: 400; color: RGBA(0, 0, 0, 0.4); } .item-date { margin-top: 10px; color: #f36292; } .van-col:nth-child(4) .item-date { color: #9ba7b0; }} |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
