解决vant在vue3中按需引入没有效果

2023-06-24 11:29| 来源: 网络整理| 查看: 265

0.前言

使用vant + vue3 + vite 搭建h5，按需引用组件，使用van-button这些组件时完全没有问题，但是在使用轻提示（Toast）时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到body元素下了，只是因为样式原因导致看不见。

1.官方使用

请添加图片描述

PS: 因为vue3没有了this，所以就必须要通过import的方式进行使用，不然会报错“undefined”，如果是vue2就可以直接使用this调用哦

官方的使用没有问题，但是这里没有提到说要把对应的样式文件导入，所以导致toast元素节点已经被加载，但是却没有样式的尴尬局面（如果你的高度为100%，那么你应该看不见渲染的文字）

2.解决方案

在main.js入口文件中增加 import 'vant/lib/index.css';

// main.js import { createApp } from 'vue'; import 'vant/lib/index.css' import { Toast } from 'vant' const app = createApp() app.use(Toast) // ...

我是为了方便，谁知道后还有没有其它样式相关的问题，干脆就全部引入了。

当然你也可以只引入Toast的样式文件import 'vant/es/toast/style/index'

后缀不是忘了，而是不要写

【本文地址】

公司简介

联系我们