Vant 移动端UI

Vue项目中安装Vant

Vue 3 项目,安装最新版

Vant npm i vant

组件按需引入配置

vant按需引入- - -安装"unplugin-vue-components" 插件

Vite 中使用 Vant 的话,可以使用 "unplugin-vue-components" 插件,这个插件可以按需引入用到的Vant组件,使用Vant 组件时直接在 template模板 里使用就可以,不用手动 在 ts 脚本里 import导入

1.安装插件

通过 npm 安装

npm i @vant/auto-import-resolver unplugin-vue-components -D

通过 yarn 安装

yarn add @vant/auto-import-resolver unplugin-vue-components -D

通过 pnpm 安装

pnpm add @vant/auto-import-resolver unplugin-vue-components -D

通过 bun 安装

bun add @vant/auto-import-resolver unplugin-vue-components -D

2.配置插件

1、如果是基于 vite 的项目,在 vite.config.js 文件中配置插件:

javascript 复制代码
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

2、如果是基于 vue-cli 的项目,在 vue.config.js 文件中配置插件:

javascript 复制代码
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

3、如果是基于 webpack 的项目,在 webpack.config.js 文件中配置插件:

javascript 复制代码
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  plugins: [
    ComponentsPlugin({
      resolvers: [VantResolver()],
    }),
  ],
};

组件中使用

1、示例:

html 复制代码
<template>
   <van-button type="primary" >按钮 </van-button>
</template>

2、函数式组件使用注意事项

Vant 中 Toast,Dialog,Notify 和 ImagePreview 组件是函数式组件,需要 import 引入后,再使用,且要引入组件样式,例如:

html 复制代码
<script setup lang="ts">
import { showToast } from 'vant';

showToast('请填写正确的手机号');

</script>

mian.ts 中引入组件样式:

javascript 复制代码
import 'vant/es/toast/style';

其他函数式组件引用示例:

javascript 复制代码
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

3、Vant 组件样式相关问题解决方法

1.修改vant 组件样式方法:

引用组件后,在浏览器中打开调试窗口,找到对应要修改样式的组件元素,查看组件元素的类名,重写该类名样式

有时不生效可能是权重不够,叠加类名或者样式添加 " !important "

示例:

css 复制代码
.van-cell {
  font-size: 28px!important;
  background: transparent!important;
}

2.vant表单组件清除组件很难点,经常点上去没有清除效果

可能是被遮盖了,设置表单的右边margin 大于 清除图标的宽度:

示例:

css 复制代码
.van-field__control {
  margin-right: 15px!important;
}

3.vant 表单清除按钮 PC端失效

1、安装模块

npm i @vant/touch-emulator -S

2、在 " main.ts " 文件中引入模块后自动生效

import '@vant/touch-emulator'

安装引入后如果没有立即生效,可以重启一下项目,再查看效果

查阅Vant 文档了解到 vant是针对移动端的,PC端下有些组件可能会失效,可以安装 "vant/touch-emulator" 模块解决。

Vant 有 Vue 2 版本、Vue 3 版本、微信小程序版本、 React 版本、支付宝小程序版本。

了解更多vant先关内容可以查阅Vant官方文档~

相关推荐
lilu88888881 小时前
AI代码生成器赋能房地产:ScriptEcho如何革新VR/AR房产浏览体验
前端·人工智能·ar·vr
LCG元1 小时前
Vue.js组件开发-实现对视频预览
前端·vue.js·音视频
傻小胖1 小时前
shallowRef和shallowReactive的用法以及使用场景和ref和reactive的区别
javascript·vue.js·ecmascript
阿芯爱编程1 小时前
vue3 react区别
前端·react.js·前端框架
烛.照1032 小时前
Nginx部署的前端项目刷新404问题
运维·前端·nginx
YoloMari2 小时前
组件中的emit
前端·javascript·vue.js·微信小程序·uni-app
CaptainDrake2 小时前
力扣 Hot 100 题解 (js版)更新ing
javascript·算法·leetcode
浪浪山小白兔2 小时前
HTML5 Web Worker 的使用与实践
前端·html·html5
疯狂小料3 小时前
React 路由导航与传参详解
前端·react.js·前端框架
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS贸易行业crm系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源