From 3e039b02b5cdf90ac00cd917480cd858f520c4f7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 2 Sep 2022 23:24:27 +0800
Subject: [PATCH] docs: add function component style guide (#11003)

---
 packages/vant/docs/markdown/quickstart.zh-CN.md |  2 ++
 packages/vant/src/dialog/README.zh-CN.md        | 10 ++++++++++
 packages/vant/src/image-preview/README.zh-CN.md | 10 ++++++++++
 packages/vant/src/notify/README.zh-CN.md        | 10 ++++++++++
 packages/vant/src/toast/README.zh-CN.md         | 10 ++++++++++
 5 files changed, 42 insertions(+)

diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md
index 14a83b503..bd93bd588 100644
--- a/packages/vant/docs/markdown/quickstart.zh-CN.md
+++ b/packages/vant/docs/markdown/quickstart.zh-CN.md
@@ -216,6 +216,8 @@ import { ImagePreview } from 'vant';
 import 'vant/es/image-preview/style';
 ```
 
+你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
+
 > 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
 
 ## 在框架中使用
diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md
index d73543415..82521e8ad 100644
--- a/packages/vant/src/dialog/README.zh-CN.md
+++ b/packages/vant/src/dialog/README.zh-CN.md
@@ -14,6 +14,16 @@ import { Dialog } from 'vant';
 Dialog({ message: '提示' });
 ```
 
+#### 手动引入样式
+
+Dialog 组件是以函数形式提供的，如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式，则无法正确识别 Dialog 组件，因此需要手动引入 Dialog 组件的样式：
+
+```js
+import 'vant/es/dialog/style';
+```
+
+你可以在项目的入口文件或公共模块中引入 Dialog 组件的样式，这样在业务代码中使用 Dialog 时，便不再需要重复引入样式了。
+
 ### 组件调用
 
 通过组件调用 Dialog 时，可以通过下面的方式进行注册：
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index ba13389c9..05516c3d2 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -14,6 +14,16 @@ import { ImagePreview } from 'vant';
 ImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
 ```
 
+#### 手动引入样式
+
+ImagePreview 组件是以函数形式提供的，如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式，则无法正确识别 ImagePreview 组件，因此需要手动引入 ImagePreview 组件的样式：
+
+```js
+import 'vant/es/image-preview/style';
+```
+
+你可以在项目的入口文件或公共模块中引入 ImagePreview 组件的样式，这样在业务代码中使用 ImagePreview 时，便不再需要重复引入样式了。
+
 ### 组件调用
 
 通过组件调用 `ImagePreview` 时，可以通过下面的方式进行注册。
diff --git a/packages/vant/src/notify/README.zh-CN.md b/packages/vant/src/notify/README.zh-CN.md
index d841fa311..bda1a83eb 100644
--- a/packages/vant/src/notify/README.zh-CN.md
+++ b/packages/vant/src/notify/README.zh-CN.md
@@ -14,6 +14,16 @@ import { Notify } from 'vant';
 Notify('通知内容');
 ```
 
+#### 手动引入样式
+
+Notify 组件是以函数形式提供的，如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式，则无法正确识别 Notify 组件，因此需要手动引入 Notify 组件的样式：
+
+```js
+import 'vant/es/notify/style';
+```
+
+你可以在项目的入口文件或公共模块中引入 Notify 组件的样式，这样在业务代码中使用 Notify 时，便不再需要重复引入样式了。
+
 ### 组件调用
 
 通过组件调用 Notify 时，可以通过下面的方式进行注册：
diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md
index 1da8a69b7..e18402388 100644
--- a/packages/vant/src/toast/README.zh-CN.md
+++ b/packages/vant/src/toast/README.zh-CN.md
@@ -16,6 +16,16 @@ const app = createApp();
 app.use(Toast);
 ```
 
+#### 手动引入样式
+
+Toast 组件是以函数形式提供的，如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式，则无法正确识别 Toast 组件，因此需要手动引入 Toast 组件的样式：
+
+```js
+import 'vant/es/toast/style';
+```
+
+你可以在项目的入口文件或公共模块中引入 Toast 组件的样式，这样在业务代码中使用 Toast 时，便不再需要重复引入样式了。
+
 ## 代码演示
 
 ### 文字提示