[Vant4] Vant4 style does not display the problem && Toast light prompt does not display && Notify message prompt does not display

The vant4 style does not display the problem

problem lies in

There is no style when using Toast light prompt and Notify message prompt , as shown below

---

solution

Import the required styles, for example:

• If I want to use Notify , I will introduceimport 'vant/es/notify/style'
• If I want to use Toast , I will introduceimport 'vant/es/toast/style'

---

code display

HomeView.vue

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

---

Success renderings

---

End

2023/3/7 Revised

---

recommend

1. [Vue3] vue3's keepAlive saves the scrolling position
2. CKEditor5 adds code highlighting (Prismjs)