mirror of
https://github.com/youzan/vant.git
synced 2025-10-17 00:14:18 +00:00
docs: add more tips of desktop usage (#4840)
This commit is contained in:
@@ -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 等机型底部存在底部指示条,指示条的操作区域与页
|
||||
```
|
||||
|
||||
<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';
|
||||
```
|
||||
|
Reference in New Issue
Block a user