Vue3 vant4 解决引入的Toast和dialog样式丢失的bug

最新推荐文章于 2025-06-24 16:34:58 发布
最新推荐文章于 2025-06-24 16:34:58 发布
阅读量3k 收藏 9
点赞数 14
CC 4.0 BY-SA版权
分类专栏： Vue3 文章标签： bug 前端 javascript vue.js css3 html5 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Steven_Son/article/details/135995902
本文介绍了在TypeScript项目中，如何正确地在main.ts文件中导入VantUI库的Toast和Dialog组件，并使用它们的方法。示例展示了如何通过`app.use`方法集成这些组件。
情景再现：

在这里插入图片描述

正确做法：

在main.ts中单独引入

import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import { Toast, Dialog } from 'vant'

app.use(Toast)
app.use(Dialog)
效果如下

在这里插入图片描述
轻松拿下。

Bug 解决 | 组件库报错、或样式丢失不生效
weixin_48916444的博客
08-07 2263
我相信很多同学在做项目的时候都会遇到组件库相关的问题， 明明用了这个样式怎么不生效？为什么还报错了？其实很多时候不是咱们用的不对，是我们使用的组件库更新了！老的代码和新的版本不兼容，导致的各种问题。分享一些组件库报错或样式丢失的案例，供大家参考。
【uniapp】使用Vant组件van-toast与van-dialog
ONLYSRY的博客
08-29 5876
使用中发现我们的引入方式其实和官网不一样，就导致了不知道如何使用toast轻提示与dialog弹出框。【uniapp】uni中导入vant组件库_小付学代码的博客-CSDN博客。于是我们直接引入开始使用：【buton点击事件进行测试】发现控制台会报一个警告：【未找到xxx节点】......
vant4的dialog、toast不显示样式记录
搬砖小白灿哥哥
03-28 1411
插件会自动帮我们把组件加载上去，但是对于函数式的组件，比如dialog，toast这样的，就会显示的时候没有样式，类似这样。这是因为没有加载对应插件的样式，需要手动加载进来，在页面上直接import进来即可。使用的是按需加载，就是这个。
vue cli3/cli4 vant-ui样式出不来的问题
u014678583的博客
04-16 3763
第一步：先检查是否成功安装vant，在package.json中查看 没有安装的有两种方法： 1、npm npm i vant -S npm i babel-plugin-import -D 2、终端-命令行，输入vue ui，打开图形化界面，选择依赖安装 第二步 ：检查babel.config.js 重点 第三步：vue.config.js，检查有没有...
vue3 + vite 按需引入vant(解决问题showFailToast样式不生效)
最新发布
weixin_50249440的博客
06-24 716
vue3 + vite 按需引入vant(解决问题showToast/showSuccessToast/showFailToast样式不生效)
vant4 页面使用Popup,导致Toast样式变成白底
weixin_44073164的博客
05-09 271
import "vant/es/toast/style" // 全局引入样式。import "vant/lib/index.css" // 全局引入样式。
Vant4函数组件样式丢失问题
Xya_a的博客
09-15 673
今天在写项目的时候 使用到了showToast组件 发现样式丢失了网上冲浪时才发现要导入。例如：import 'vant/es/toast/style';感觉奇奇怪怪的 为什么导入。
vant4的 toast、dialog、notify、ImagePreview不显示样式
weixin_57895172的博客
07-03 1027
vant4的 toast、dialog、notify、ImagePreview不显示样式
vue3 遇到的坑vant组件按需引入 和 Toast组件不显示，
m0_70799902的博客
04-22 1334
但是单独引入Toast就可以。main.js文件中需要映入。
在Vite + Vue3 +Vant4中按需引入组件，使用Toast提示信息不展示
qq_44741577的博客
02-04 2042
时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到。这些组件时完全没有问题，但是在使用轻提示（+ vue3 + vite 搭建h5，元素下了，只是因为样式原因导致看不见。这个插件对某些组件的样式无法引入。
vue3使用vant4的showToast全局注册
qq_40039641的博客
06-26 2244
vue3中使用vant4的showToast轻量提示语
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
在Vue项目中，当我们使用`scoped`属性来限制样式只作用于当前组件时，可能会遇到一个问题，即无法修改引入的第三方UI库，如Vant的组件样式。这是因为`scoped`的作用范围仅限于当前组件，不会影响其子组件。Vant的...
vue3+ts+pinia+vant-项目搭建
cwjxyp的博客
07-31 1073
/src├── assets `静态资源，图片...`├── components `通用组件`├── router `路由`├── api `接口服务API`├── stores `状态仓库`├── styles `样式`├── types `TS类型`├── utils `工具函数`├── views `页面`├── main.ts `入口文件`└──App.vue `根组件`
vue3移动端项目构建，vue3+vant+vite+axios+pinia+sass
局外人LZ的博客
02-27 7689
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
微信小程序 使用 vant-weapp 的 dialog 样式有误
悟世君子的博客
05-07 2845
样式问题如下图 解决办法：找到 app.json 文件，将"style":"v2" 配置去掉即可 去除 style 配置后，效果如图 样式恢复正常
Vant-ui中digLog弹出层样式出错
抗争小青年的博客
10-17 995
​ 最近在开发项目的时候，发现使用框架(Vant-ui)快速搭建页面时，样式出错。这时候一般有两种解决思路：第一种往往是最容易找到的，也是最直接的。就比如我今天碰到的问题：遇到这种问题，先去官方文档查看，是否有这方面的配置。若没有，则去分析这块的代码是否有样式污染的问题(:一个样式，多个DOM使用)，就比如我出现的问题：打开样式表，一看还真是样式污染：可以清除的看到类的样式之前已经被我修改过了，所以导致vant-ui的本身样式被修改。如果到了这步还没有解决问题，就可以继续查看样式表寻找是否有其他的样式，寻找
vue3 使用vant组件库中的Toast报错：Toast is not defined
hunantai的博客
09-27 2006
网上搜了很多办法，main.js中将toast挂载到实例，组件中使用this.$toast还是报错。在组件中单独引用import { Toast } from “vant”，结果还是报错。全局引入还在探索中。
vue 通用样式被导入多次 vant 样式丢失不正常
积极的小可爱~的博客
03-18 2319
问题 1：在看控制台的时候发现通用样式重复导入了 2：vant的样式有问题，好像vant的padding都没了 发生原因 我配置了通用样式，会自动导入一遍，然后我在app.vue中又导入了一遍，这样已经有重复导入了两遍了，然后配置的@base-color这些数据跟reset.less放在一起，这样导致重复引入第三遍。综上就是为啥看控制台会有那么多次重复引入样式的原因。 而vant的样式丢失，看控制台一个个注释样式发现是因为reset.less中的padding:0导致的，注释掉就好了，但是当时一直不
Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案
m0_52459016的博客
02-10 8617
Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案
vue3引入vant
07-27
在Vue3中引入Vant组件库有几种方式。第一种方式是使用按需引入的方式，可以通过以下代码实现： ```javascript // 在需要使用的组件中按需引入 import { Button, Toast, Dialog } from 'vant'; // 在Vue实例中注册...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值