From 7c052f4c0c65d3099cce7dc0c8aa824f34453498 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 25 Oct 2019 17:50:11 +0800 Subject: [PATCH] docs: add more tips of desktop usage (#4840) --- docs/markdown/quickstart.zh-CN.md | 30 +++++++++++++++-------------- src/area/README.zh-CN.md | 6 ++++++ src/datetime-picker/README.zh-CN.md | 4 ++++ src/image-preview/README.zh-CN.md | 6 ++++++ src/number-keyboard/README.zh-CN.md | 6 ++++++ src/picker/README.zh-CN.md | 6 ++++++ src/pull-refresh/README.zh-CN.md | 6 ++++++ src/swipe-cell/README.zh-CN.md | 6 ++++++ 8 files changed, 56 insertions(+), 14 deletions(-) diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 5d0cd3f9a..224cbb6e6 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -149,6 +149,22 @@ module.exports = { > 注意：在配置 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`属性，设置该属性后，即可在对应的机型上开启适配，如下示例： @@ -162,17 +178,3 @@ iPhone X 等机型底部存在底部指示条，指示条的操作区域与页 ``` - -### 在桌面端使用 - -Vant 组件默认只适配了移动端设备，如果你需要在桌面端使用 vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator). - -```bash -# 安装模块 -npm i @vant/touch-emulator -S -``` - -```js -// 引入模块后自动生效 -import '@vant/touch-emulator'; -``` diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 7f0a9cd34..774efffb5 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -144,3 +144,9 @@ Vue.use(Area); } ]; ``` + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 9a2f7f34d..b469d305a 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -204,3 +204,7 @@ export default { 如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。 对此问题的详细解释：[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index ad43ed903..7c4bd6ca4 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -160,3 +160,9 @@ export default { |------|------|------| | url | 当前图片 URL | *string* | | index | 当前图片的索引值 | *number* | + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 8e3b6bf38..8159414c6 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -134,3 +134,9 @@ export default { | delete | 自定义删除按键内容 | | extra-key | 自定义左下角按键内容 | title-left | 自定义标题栏左侧内容 | + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 61b4c35ab..519120739 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -253,3 +253,9 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 | setColumnIndex | 设置对应列选中项的索引 | columnIndex, optionIndex | - | | getColumnValues | 获取对应列中所有选项 | columnIndex | values | | setColumnValues | 设置对应列中所有选项 | columnIndex, values | - | + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 49b227e11..b87738b41 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -73,3 +73,9 @@ export default { | pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | | loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } | | loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index c4d7558a0..22739961f 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -115,3 +115,9 @@ export default { |------|------|------|------| | open | 打开单元格侧边栏 | position: `left | right` | - | | close | 收起单元格侧边栏 | - | - | + +## 常见问题 + +### 在桌面端无法操作组件？ + +参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。