From 9548212881616af6700055eb1004dc7a33314931 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 10:42:49 +0800 Subject: [PATCH 1/6] docs: fix year --- README.zh-CN.md | 2 +- docs/markdown/home.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index 9455804dbb2..5bd7a8cf31c 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -26,7 +26,7 @@ ### 介绍 -Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 +Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。 diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md index a2fe61b5030..c34cc41c53b 100644 --- a/docs/markdown/home.zh-CN.md +++ b/docs/markdown/home.zh-CN.md @@ -8,7 +8,7 @@ ### 介绍 -Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

+Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。 From b1183b99d372855baff894970d7ca7cd124afca7 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 10:55:45 +0800 Subject: [PATCH 2/6] docs: update features --- README.md | 5 +++-- README.zh-CN.md | 7 ++++--- docs/markdown/home.en-US.md | 5 +++-- docs/markdown/home.zh-CN.md | 5 +++-- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index b699af70a3e..884f73eac48 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,9 @@ ## Features -- 60+ Reusable components -- 90% Unit test coverage +- 65+ Reusable components +- 4kb Component average size +- 90%+ Unit test coverage - Extensive documentation and demos - Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) - Support Custom Theme diff --git a/README.zh-CN.md b/README.zh-CN.md index 5bd7a8cf31c..1ed9cf95743 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -32,13 +32,14 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 ## 特性 -- 60+ 高质量组件，覆盖移动端各类场景 -- 90%+ 单元测试覆盖率，提供稳定性保障 +- 提供 60 多个高质量组件，覆盖移动端各类场景 +- 性能极佳，组件平均体积不到 4kb +- 单元测试覆盖率 90%+，提供稳定性保障 - 完善的中英文文档和示例 - 支持按需引入 - 支持主题定制 - 支持国际化 -- 支持 TS +- 支持 TypeScript - 支持 SSR ## 安装 diff --git a/docs/markdown/home.en-US.md b/docs/markdown/home.en-US.md index 3ee90ba6c35..d7a27c70b9a 100644 --- a/docs/markdown/home.en-US.md +++ b/docs/markdown/home.en-US.md @@ -8,8 +8,9 @@ ### Features -- 60+ Reusable components -- 90% Unit test coverage +- 65+ Reusable components +- 4kb Component average size +- 90%+ Unit test coverage - Extensive documentation and demos - Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) - Support Custom Theme diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md index c34cc41c53b..1a833f34e01 100644 --- a/docs/markdown/home.zh-CN.md +++ b/docs/markdown/home.zh-CN.md @@ -14,8 +14,9 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 ### 特性 -- 60+ 高质量组件，覆盖移动端各类场景 -- 90%+ 单元测试覆盖率，提供稳定性保障 +- 提供 60 多个高质量组件，覆盖移动端各类场景 +- 性能极佳，组件平均体积不到 4kb +- 单元测试覆盖率 90%+，提供稳定性保障 - 完善的中英文文档和示例 - 支持按需引入 - 支持主题定制 From 000ea342a8a4f74e2ce612c1318c6d097320e510 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 17:20:04 +0800 Subject: [PATCH 3/6] docs: add advanced usage guide --- docs/markdown/advanced-usage.en-US.md | 28 ++++++++ docs/markdown/advanced-usage.zh-CN.md | 94 +++++++++++++++++++++++++++ docs/markdown/quickstart.en-US.md | 27 -------- docs/markdown/quickstart.zh-CN.md | 89 +------------------------ vant.config.js | 8 +++ 5 files changed, 131 insertions(+), 115 deletions(-) create mode 100644 docs/markdown/advanced-usage.en-US.md create mode 100644 docs/markdown/advanced-usage.zh-CN.md diff --git a/docs/markdown/advanced-usage.en-US.md b/docs/markdown/advanced-usage.en-US.md new file mode 100644 index 00000000000..67bcf2556c8 --- /dev/null +++ b/docs/markdown/advanced-usage.en-US.md @@ -0,0 +1,28 @@ +# Advanced Usage + +## Browser adaptation + +### Rem units + +Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`. + +- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) +- [lib-flexible](https://github.com/amfe/lib-flexible) + +#### PostCSS Config + +postcss config example: + +```js +module.exports = { + plugins: { + autoprefixer: { + browsers: ['Android >= 4.0', 'iOS >= 8'], + }, + 'postcss-pxtorem': { + rootValue: 37.5, + propList: ['*'], + }, + }, +}; +``` diff --git a/docs/markdown/advanced-usage.zh-CN.md b/docs/markdown/advanced-usage.zh-CN.md new file mode 100644 index 00000000000..d68d94c7cb4 --- /dev/null +++ b/docs/markdown/advanced-usage.zh-CN.md @@ -0,0 +1,94 @@ +# 进阶用法 + +### 介绍 + +通过本章节你可以了解到 Vant 的一些进阶用法，比如浏览器适配、组件实例方法调用等。 + +## 浏览器适配 + +### Rem 布局适配 + +Vant 中的样式默认使用 `px` 作为单位，如果需要使用 `rem` 单位，推荐使用以下两个工具： + +- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem +- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值 + +#### PostCSS 配置 + +下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改。 + +```js +module.exports = { + plugins: { + autoprefixer: { + browsers: ['Android >= 4.0', 'iOS >= 8'], + }, + 'postcss-pxtorem': { + rootValue: 37.5, + propList: ['*'], + }, + }, +}; +``` + +> Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。 + +### 桌面端适配 + +Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的`touch`事件，没有监听桌面端的`mouse`事件。 + +如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将`mouse`事件转换成对应的`touch`事件，使得组件能够在桌面端使用。 + +```bash +# 安装模块 +npm i @vant/touch-emulator -S +``` + +```js +// 引入模块后自动生效 +import '@vant/touch-emulator'; +``` + +### 底部安全区适配 + +iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例： + +```html + + + + + +``` + + + +## 组件用法 + +### 组件实例方法 + +Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://cn.vuejs.org/v2/api/#ref) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。 + +```html + + + 复选框 + +``` + +```js +export default { + data() { + return { + checked: false, + }; + }, + // 注意：组件挂载后才能访问到 ref 对象 + mounted() { + this.$refs.checkbox.toggle(); + }, +}; +``` diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md index 76cd26308e2..4fbd04b8c77 100644 --- a/docs/markdown/quickstart.en-US.md +++ b/docs/markdown/quickstart.en-US.md @@ -122,30 +122,3 @@ Vue.use(Vant); ``` > If you configured babel-plugin-import, you won't be allowed to import all components. - -## Other - -### Rem units - -Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`. - -- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) -- [lib-flexible](https://github.com/amfe/lib-flexible) - -#### PostCSS Config - -postcss config example: - -```js -module.exports = { - plugins: { - autoprefixer: { - browsers: ['Android >= 4.0', 'iOS >= 8'], - }, - 'postcss-pxtorem': { - rootValue: 37.5, - propList: ['*'], - }, - }, -}; -``` diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 352df67c631..78e2f4ca0da 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -通过本章节你可以了解到 Vant 的安装方式和组件使用方法。 +通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。 ## 安装 @@ -149,93 +149,6 @@ Vue.use(Vant); > Tips: 配置按需引入后，将不允许直接导入所有组件。 -## 进阶用法 - -### Rem 适配 - -Vant 中的样式默认使用 `px` 作为单位，如果需要使用 `rem` 单位，推荐使用以下两个工具： - -- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem -- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值 - -#### PostCSS 配置 - -下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改。 - -```js -module.exports = { - plugins: { - autoprefixer: { - browsers: ['Android >= 4.0', 'iOS >= 8'], - }, - 'postcss-pxtorem': { - rootValue: 37.5, - propList: ['*'], - }, - }, -}; -``` - -> Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。 - -### 在桌面端使用 - -Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的`touch`事件，没有监听桌面端的`mouse`事件。 - -如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将`mouse`事件转换成对应的`touch`事件，使得组件能够在桌面端使用。 - -```bash -# 安装模块 -npm i @vant/touch-emulator -S -``` - -```js -// 引入模块后自动生效 -import '@vant/touch-emulator'; -``` - -### 底部安全区适配 - -iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例： - -```html - - - - - -``` - - - -### 组件实例方法 - -Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://cn.vuejs.org/v2/api/#ref) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。 - -```html - - - 复选框 - -``` - -```js -export default { - data() { - return { - checked: false, - }; - }, - // 注意：组件挂载后才能访问到 ref 对象 - mounted() { - this.$refs.checkbox.toggle(); - }, -}; -``` - ## 常见问题 ### 在 HTML 中无法正确渲染组件？ diff --git a/vant.config.js b/vant.config.js index 713773291b2..e009c852736 100644 --- a/vant.config.js +++ b/vant.config.js @@ -63,6 +63,10 @@ module.exports = { path: 'quickstart', title: '快速上手', }, + { + path: 'advanced-usage', + title: '进阶用法', + }, { path: 'changelog', title: '更新日志', @@ -422,6 +426,10 @@ module.exports = { path: 'quickstart', title: 'Quickstart', }, + { + path: 'advanced-usage', + title: 'Advanced Usage', + }, { path: 'changelog', title: 'Changelog', From 2206e77cc55e384461c160de308c0763dfba769a Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 17:25:35 +0800 Subject: [PATCH 4/6] docs: update links --- src/action-sheet/README.zh-CN.md | 2 +- src/address-edit/README.zh-CN.md | 2 +- src/area/README.zh-CN.md | 4 ++-- src/calendar/README.zh-CN.md | 4 ++-- src/checkbox/README.zh-CN.md | 4 ++-- src/collapse/README.zh-CN.md | 2 +- src/count-down/README.zh-CN.md | 2 +- src/datetime-picker/README.zh-CN.md | 4 ++-- src/dropdown-menu/README.zh-CN.md | 2 +- src/field/README.zh-CN.md | 4 ++-- src/form/README.zh-CN.md | 2 +- src/goods-action/README.zh-CN.md | 2 +- src/image-preview/README.zh-CN.md | 2 +- src/list/README.zh-CN.md | 2 +- src/number-keyboard/README.zh-CN.md | 4 ++-- src/picker/README.zh-CN.md | 4 ++-- src/popup/README.zh-CN.md | 2 +- src/pull-refresh/README.zh-CN.md | 2 +- src/search/README.zh-CN.md | 2 +- src/share-sheet/README.zh-CN.md | 2 +- src/sku/README.zh-CN.md | 4 ++-- src/submit-bar/README.zh-CN.md | 2 +- src/swipe-cell/README.zh-CN.md | 4 ++-- src/swipe/README.zh-CN.md | 4 ++-- src/tab/README.zh-CN.md | 2 +- src/tabbar/README.zh-CN.md | 2 +- src/uploader/README.zh-CN.md | 2 +- 27 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 4c536711dec..6b9bfbb6055 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -171,7 +171,7 @@ export default { | close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Action 数据结构 diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index 4fe7e99a6d7..47e3c6ccddb 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -116,7 +116,7 @@ export default { ### 方法 -通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | ---------------- | ------------ | --------------------- | ------ | diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 9ab47d54407..b4719c003dd 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -89,7 +89,7 @@ Vue.use(Area); ### 方法 -通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -159,4 +159,4 @@ Vue.use(Area); ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index d1b949be9fc..d8c5d129217 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -259,7 +259,7 @@ export default { | round | 是否显示圆角弹窗 | _boolean_ | `true` | | close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Range Props @@ -316,7 +316,7 @@ export default { ### 方法 -通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | ------ | ---------------------- | ---- | ------ | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index bf14f123fe4..bb0f2d35268 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -279,7 +279,7 @@ export default { ### CheckboxGroup 方法 -通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -287,7 +287,7 @@ export default { ### Checkbox 方法 -通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index a74043f65dc..e45f0f2988a 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -145,7 +145,7 @@ export default { ### CollapseItem 方法 -通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index 3d1f32901e9..e6bab533792 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -170,7 +170,7 @@ export default { ### 方法 -通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 04f5c4b5edb..d5c26fff7c6 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -303,7 +303,7 @@ export default { ### 方法 -通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -325,7 +325,7 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 ### 是否有年份或月份选择器？ diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index cc5648cb241..eeadceabeb1 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -171,7 +171,7 @@ export default { ### DropdownItem 方法 -通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 242b745f006..e2ecbae44b7 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -295,7 +295,7 @@ export default { ### 方法 -通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | ------ | -------------- | ---- | ------ | @@ -321,4 +321,4 @@ HTML 原生的 `type="number"` 属性在 iOS 和 Android 系统上都存在一 ### 在桌面端点击清除按钮无效？ -清除按钮监听是的移动端 Touch 事件，参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +清除按钮监听是的移动端 Touch 事件，参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 8722be87f97..cf6018f3c23 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -508,7 +508,7 @@ export default { ### 方法 -通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index c6d5f783f7f..7ce4d8033b0 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -90,7 +90,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### GoodsActionIcon Props diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 4b6f52420d1..f5985e2ce37 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -228,4 +228,4 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 6d50869b0eb..a16acc0032f 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -177,7 +177,7 @@ export default { ### 方法 -通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index a52e8685de4..978cd9d3c40 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -174,7 +174,7 @@ export default { | show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` | | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` | | get-container `v2.10.0` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### Events @@ -199,4 +199,4 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index c7a22a457c7..0214fbc8ef2 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -315,7 +315,7 @@ export default { ### 方法 -通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -335,4 +335,4 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 877ab20f8ce..90f1ce5d2ca 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -135,7 +135,7 @@ export default { | close-icon-position | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | | transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | | get-container | 指定挂载的节点 | _string \| () => Element_ | - | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | ### Events diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 46b24adbbe0..aaffe4a6186 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -143,4 +143,4 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 8be86e3f850..8b5abf38ba0 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -160,4 +160,4 @@ export default { ### 在桌面端点击清除按钮无效？ -清除按钮监听是的移动端 Touch 事件，参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +清除按钮监听是的移动端 Touch 事件，参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index f1ce561568b..c24d21bc2f6 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -166,7 +166,7 @@ export default { | lazy-render | 是否在显示弹层时才渲染内容 | _boolean_ | `true` | | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Option 数据结构 diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md index dca1ce63ce0..3248a75dfc9 100644 --- a/src/sku/README.zh-CN.md +++ b/src/sku/README.zh-CN.md @@ -140,7 +140,7 @@ export default { | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | | initial-sku | 默认选中的 sku，具体参考高级用法 | _object_ | `{}` | | show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` | | properties `v2.4.2` | 商品属性 | _array_ | - | | preview-on-click-image `v2.5.2` | 是否在点击商品图片时自动预览 | _boolean_ | `true` | @@ -162,7 +162,7 @@ export default { ### 方法 -通过 ref 可以获取到 Sku 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Sku 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | ------------------------- | ---------------------- | ---- | ------- | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 553d69d1a93..63b63cf6bde 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -77,7 +77,7 @@ Vue.use(SubmitBar); | decimal-length | 价格小数点后位数 | _number \| string_ | `2` | | disabled | 是否禁用按钮 | _boolean_ | `false` | | loading | 是否显示加载中的按钮 | _boolean_ | `false` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### Events diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index 8a6c0a55576..ae4fbbc0189 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -145,7 +145,7 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： ### 方法 -通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | ------ | ---------------- | ------------------------ | ------ | @@ -156,4 +156,4 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index 0c55b3f793c..e4853ece04d 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -197,7 +197,7 @@ export default { ### Swipe 方法 -通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。。 +通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -229,7 +229,7 @@ export default { ### 在桌面端无法操作组件？ -参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 +参见[桌面端适配](#/zh-CN/advanced-usage#zhuo-mian-duan-gua-pei)。 ### Swipe 组件功能太少，无法实现复杂效果？ diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index ef11a0dae22..89fc7ae53a1 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -273,7 +273,7 @@ export default { ### Tabs 方法 -通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 6eaada296bb..75c2c72d700 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -167,7 +167,7 @@ export default { | inactive-color | 未选中标签的颜色 | _string_ | `#7d7e80` | | route | 是否开启路由模式 | _boolean_ | `false` | | placeholder `v2.6.0` | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei)，设置 fixed 时默认开启 | _boolean_ | `false` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei)，设置 fixed 时默认开启 | _boolean_ | `false` | | before-change `v2.10.4` | 切换标签前的回调函数，返回 `false` 可阻止切换，支持返回 Promise | _(name) => boolean \| Promise_ | - | ### Tabbar Events diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 7415372d8a0..b81ac479df6 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -285,7 +285,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： ### 方法 -通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。 +通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | From ea896803a04aabf19eb887a95b9d0cf6758384ac Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 17:38:14 +0800 Subject: [PATCH 5/6] docs: add "adapt to PC browsers" --- docs/markdown/advanced-usage.en-US.md | 20 +++++++++++++++++--- docs/markdown/advanced-usage.zh-CN.md | 4 ++-- src/locale/README.md | 2 +- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/docs/markdown/advanced-usage.en-US.md b/docs/markdown/advanced-usage.en-US.md index 67bcf2556c8..bb588bbb7ef 100644 --- a/docs/markdown/advanced-usage.en-US.md +++ b/docs/markdown/advanced-usage.en-US.md @@ -2,16 +2,16 @@ ## Browser adaptation -### Rem units +### Rem Units -Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`. +Vant uses `px` unit by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`. - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) - [lib-flexible](https://github.com/amfe/lib-flexible) #### PostCSS Config -postcss config example: +Postcss config example: ```js module.exports = { @@ -26,3 +26,17 @@ module.exports = { }, }; ``` + +### Adapt to PC Browsers + +Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser. + +```bash +# Install +npm i @vant/touch-emulator -S +``` + +```js +// Just import this module, then Vant works in PC browser +import '@vant/touch-emulator'; +``` diff --git a/docs/markdown/advanced-usage.zh-CN.md b/docs/markdown/advanced-usage.zh-CN.md index d68d94c7cb4..a3eb45883d5 100644 --- a/docs/markdown/advanced-usage.zh-CN.md +++ b/docs/markdown/advanced-usage.zh-CN.md @@ -35,9 +35,9 @@ module.exports = { ### 桌面端适配 -Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的`touch`事件，没有监听桌面端的`mouse`事件。 +Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 `touch` 事件，没有监听桌面端的 `mouse` 事件。 -如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将`mouse`事件转换成对应的`touch`事件，使得组件能够在桌面端使用。 +如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件，使得组件能够在桌面端使用。 ```bash # 安装模块 diff --git a/src/locale/README.md b/src/locale/README.md index 34d05377000..5b7dd159dc9 100644 --- a/src/locale/README.md +++ b/src/locale/README.md @@ -2,7 +2,7 @@ ### Intro -The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below. +Vant uses Chinese as the default language. If you want to use other languages, please follow the instructions below. ## Usage From 386956b08b662739f04e3d8e0048b79860883c78 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 24 Oct 2020 18:00:13 +0800 Subject: [PATCH 6/6] docs: add slot usage --- docs/markdown/advanced-usage.zh-CN.md | 84 ++++++++++++++++++--------- 1 file changed, 55 insertions(+), 29 deletions(-) diff --git a/docs/markdown/advanced-usage.zh-CN.md b/docs/markdown/advanced-usage.zh-CN.md index a3eb45883d5..6ffe5360a63 100644 --- a/docs/markdown/advanced-usage.zh-CN.md +++ b/docs/markdown/advanced-usage.zh-CN.md @@ -2,7 +2,60 @@ ### 介绍 -通过本章节你可以了解到 Vant 的一些进阶用法，比如浏览器适配、组件实例方法调用等。 +通过本章节你可以了解到 Vant 的一些进阶用法，比如组件插槽用法、多种浏览器适配方式。 + +## 组件用法 + +### 组件插槽 + +Vant 提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉，可以阅读 Vue 官方文档中的[插槽章节](https://cn.vuejs.org/v2/guide/components-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例： + +```html + + + + + +``` + +```js +export default { + data() { + return { + checked: true, + activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', + }; + }, +}; +``` + +### 组件实例方法 + +Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://cn.vuejs.org/v2/api/#ref) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。 + +```html + + + 复选框 + +``` + +```js +export default { + data() { + return { + checked: false, + }; + }, + // 注意：组件挂载后才能访问到 ref 对象 + mounted() { + this.$refs.checkbox.toggle(); + }, +}; +``` ## 浏览器适配 @@ -64,31 +117,4 @@ iPhone X 等机型底部存在底部指示条，指示条的操作区域与页 ``` - - -## 组件用法 - -### 组件实例方法 - -Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://cn.vuejs.org/v2/api/#ref) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。 - -```html - - - 复选框 - -``` - -```js -export default { - data() { - return { - checked: false, - }; - }, - // 注意：组件挂载后才能访问到 ref 对象 - mounted() { - this.$refs.checkbox.toggle(); - }, -}; -``` +