docs: add function component style guide (#11003)

This commit is contained in:
neverland 2022-09-02 23:24:27 +08:00 committed by GitHub
parent 1837ed712f
commit 3e039b02b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 0 deletions

View File

@ -216,6 +216,8 @@ import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';
```
你可以在项目的入口文件或公共模块中引入以上组件的样式,这样在业务代码中使用组件时,便不再需要重复引入样式了。
> 提示:在单个项目中不应该同时使用「全量引入」和「按需引入」,否则会导致代码重复、样式错乱等问题。
## 在框架中使用

View File

@ -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 时,可以通过下面的方式进行注册:

View File

@ -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` 时,可以通过下面的方式进行注册。

View File

@ -14,6 +14,16 @@ import { Notify } from 'vant';
Notify('通知内容');
```
#### 手动引入样式
Notify 组件是以函数形式提供的,如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式,则无法正确识别 Notify 组件,因此需要手动引入 Notify 组件的样式:
```js
import 'vant/es/notify/style';
```
你可以在项目的入口文件或公共模块中引入 Notify 组件的样式,这样在业务代码中使用 Notify 时,便不再需要重复引入样式了。
### 组件调用
通过组件调用 Notify 时,可以通过下面的方式进行注册:

View File

@ -16,6 +16,16 @@ const app = createApp();
app.use(Toast);
```
#### 手动引入样式
Toast 组件是以函数形式提供的,如果项目中使用 `unplugin-vue-components` 插件来自动引入组件样式,则无法正确识别 Toast 组件,因此需要手动引入 Toast 组件的样式:
```js
import 'vant/es/toast/style';
```
你可以在项目的入口文件或公共模块中引入 Toast 组件的样式,这样在业务代码中使用 Toast 时,便不再需要重复引入样式了。
## 代码演示
### 文字提示