【Vue项目】安装引入使用Vant

2024-07-02 01:34| 来源: 网络整理| 查看: 265

在这里插入图片描述

前言

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

Vue3使用Vant3 Vue2使用Vant2

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; } }

在这里插入图片描述

【本文地址】

公司简介

联系我们