1. 前言

1. 最近使用vant遇到个小问题记录如下
2. vue3使用的vant 3x

---

2. 问题

1. 使用函数式组件 界面没有反应/效果

---

3. 解决方案

1. 看文档,发现自己忘记引入样式了,真想抽死自己
2. 快速上手第四部分
3. Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components无法自动引入对应的样式，因此需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

---

4. 简单使用

Dialog.alert({
  title: '标题',
  message: '代码是写出来给人看的，附带能在机器上运行。',
}).then(() => {
  // on close
});

Dialog.alert({
  message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
}).then(() => {
  // on close
});

---

5. 后记

1. 仅做自己的沙雕时刻纪念吧,希望以后不要忘记,长点心

---

参考资料

vant

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉