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

vant4 样式不显示问题

问题所在

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

【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示_第1张图片


解决方式

引入所需的样式,例如:

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

代码展示

HomeView.vue

<template>
  
  ...
template>

<script>
  // 引入css
import 'vant/es/toast/style';
import 'vant/es/notify/style' 

// 确认框同理,其它不显示的样式同理引入相关css即可
import 'vant/es/dialog/style'

// 引入js
import { showSuccessToast,showNotify,showConfirmDialog  } from 'vant';

export default {
  name: 'home',
  setup() {
    showSuccessToast('提示内容');
    showNotify({ message: '提示' ,type:'success'});
  }
}
script>

成功效果图

【Vant4】Vant4 样式不显示问题 && Toast 轻提示不显示 && Notify 消息提示不显示_第2张图片


End

2023/3/7 一改


推荐

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

你可能感兴趣的:(Vant4,前端,vue.js,javascript)