mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-09-29 05:29:57 +08:00
docs: add more tips of desktop usage (#4840)
This commit is contained in:
parent
3cef79a2eb
commit
7c052f4c0c
@ -149,6 +149,22 @@ module.exports = {
|
|||||||
|
|
||||||
> 注意:在配置 postcss-loader 时,应避免 ignore node_modules 目录,这会导致 Vant 的样式无法被编译
|
> 注意:在配置 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`属性,设置该属性后,即可在对应的机型上开启适配,如下示例:
|
iPhone X 等机型底部存在底部指示条,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性,设置该属性后,即可在对应的机型上开启适配,如下示例:
|
||||||
@ -162,17 +178,3 @@ iPhone X 等机型底部存在底部指示条,指示条的操作区域与页
|
|||||||
```
|
```
|
||||||
|
|
||||||
<img src="https://b.yzcdn.cn/vant/safearea.png" style="margin-top: 30px;">
|
<img src="https://b.yzcdn.cn/vant/safearea.png" style="margin-top: 30px;">
|
||||||
|
|
||||||
### 在桌面端使用
|
|
||||||
|
|
||||||
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';
|
|
||||||
```
|
|
||||||
|
@ -144,3 +144,9 @@ Vue.use(Area);
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -204,3 +204,7 @@ export default {
|
|||||||
如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是`new Date('2020/01/01')`。
|
如果你遇到了在 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)。
|
对此问题的详细解释:[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -160,3 +160,9 @@ export default {
|
|||||||
|------|------|------|
|
|------|------|------|
|
||||||
| url | 当前图片 URL | *string* |
|
| url | 当前图片 URL | *string* |
|
||||||
| index | 当前图片的索引值 | *number* |
|
| index | 当前图片的索引值 | *number* |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -134,3 +134,9 @@ export default {
|
|||||||
| delete | 自定义删除按键内容 |
|
| delete | 自定义删除按键内容 |
|
||||||
| extra-key | 自定义左下角按键内容
|
| extra-key | 自定义左下角按键内容
|
||||||
| title-left | 自定义标题栏左侧内容 |
|
| title-left | 自定义标题栏左侧内容 |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -253,3 +253,9 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
|||||||
| setColumnIndex | 设置对应列选中项的索引 | columnIndex, optionIndex | - |
|
| setColumnIndex | 设置对应列选中项的索引 | columnIndex, optionIndex | - |
|
||||||
| getColumnValues | 获取对应列中所有选项 | columnIndex | values |
|
| getColumnValues | 获取对应列中所有选项 | columnIndex | values |
|
||||||
| setColumnValues | 设置对应列中所有选项 | columnIndex, values | - |
|
| setColumnValues | 设置对应列中所有选项 | columnIndex, values | - |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -73,3 +73,9 @@ export default {
|
|||||||
| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } |
|
| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } |
|
||||||
| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } |
|
| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } |
|
||||||
| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } |
|
| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
@ -115,3 +115,9 @@ export default {
|
|||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| open | 打开单元格侧边栏 | position: `left | right` | - |
|
| open | 打开单元格侧边栏 | position: `left | right` | - |
|
||||||
| close | 收起单元格侧边栏 | - | - |
|
| close | 收起单元格侧边栏 | - | - |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 在桌面端无法操作组件?
|
||||||
|
|
||||||
|
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||||
|
Loading…
x
Reference in New Issue
Block a user