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

【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 消息提示 时没有样式，如下图

解决方式

引入所需的样式，例如：

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

HomeView.vue

<template> <!-- html代码 --> ...</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)