前言
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本
Vue3安装
npm install vant --save
安装为Vant的最新版，与Vue3适配；而是vue2项目需指定版本号为v2，否则会出错
若出错需要卸载 npm uninstall vant ，重新安装
Vue2安装
@ 指定最新的版本号
npm i vant@latest-v2 -S
main引入
在main.js文件中
1、全局全部引入：
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文件做引入操作，
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内引入
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
{{ item.className }}{{ item.notSubmitted }}{{ item.positiveNum }}{{ item.positivePercentage }}{{ item.totalNumber }}下拉内容1{{ item.content }}下拉内容2{{ item.content }}下拉内容3{{ item.content }}下拉内容4{{ item.content }}
这里是引用
.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俱乐部。
