【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示(vant3.0)

编辑：rootadmin

【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示 vant4 样式不显示问题问题所在

推荐整理分享【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示(vant3.0)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vant ts,vant steps,vant-demo,vant-cli,vant ts,vant3,vant 模板,vant step,内容如对您有帮助，希望把文章链接给更多的朋友！

使用 Toast 轻提示和 Notify 消息提示时没有样式，如下图

【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示(vant3.0)

解决方式

引入所需的样式，例如：

我要使用消息提示(Notify)，就引入import 'vant/es/notify/style'我要使用轻提示(Toast)，就引入import 'vant/es/toast/style'代码展示

HomeView.vue

<template>  ...</template><script> // 引入cssimport 'vant/es/toast/style';import 'vant/es/notify/style' // 确认框同理，其它不显示的样式同理引入相关css即可import 'vant/es/dialog/style'// 引入jsimport { showSuccessToast,showNotify,showConfirmDialog } from 'vant';export default { name: 'home', setup() { showSuccessToast('提示内容'); showNotify({ message: '提示' ,type:'success'}); }}</script>成功效果图

End

2023/3/7 一改

推荐【Vue3】vue3的keepAlive保存滚动位置CKEditor5 添加代码高亮 (Prismjs)

本文链接地址:https://www.jiuchutong.com/zhishi/283631.html 转载请保留说明！

上一篇：【计算机视觉】目标检测—yolov5自定义模型的训练以及加载(计算机视觉就业前景)

下一篇：gnetmous.exe是什么进程作用是什么 gnetmous进程查询(gwsloader.exe是什么意思)