mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: add guide of safe-area-inset-bottom (#4418)
This commit is contained in:
neverland
GitHub
parent
4192ef198e
commit
50aa27fc64
@ -122,6 +122,8 @@ Vant use `px` as size units by default，you can use tools such as `postcss-pxto
|
||||
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
|
||||
- [lib-flexible](https://github.com/amfe/lib-flexible)
|
||||
|
||||
#### PostCSS Config
|
||||
|
||||
postcss config example:
|
||||
|
||||
```js
|
||||
|
||||
@ -122,11 +122,13 @@ vant.Toast('提示');
|
||||
|
||||
### Rem 适配
|
||||
|
||||
Vant 中的样式默认使用`px`作为单位，如果需要使用`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
|
||||
@ -145,6 +147,20 @@ module.exports = {
|
||||
|
||||
> 注意：在配置 postcss-loader 时，应避免 ignore node_modules 目录，这会导致 Vant 的样式无法被编译
|
||||
|
||||
### 底部安全区适配
|
||||
|
||||
iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
|
||||
|
||||
```html
|
||||
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
||||
|
||||
<!-- 开启 safe-area-inset-bottom 属性 -->
|
||||
<van-number-keyboard safe-area-inset-bottom />
|
||||
```
|
||||
|
||||
<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).
|
||||
|
||||
@ -109,9 +109,7 @@ export default {
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
"@babel/preset-typescript": "^7.6.0",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@vant/cli": "^1.0.6",
|
||||
"@vant/doc": "^2.5.6",
|
||||
"@vant/doc": "^2.5.7",
|
||||
"@vant/eslint-config": "^1.2.5",
|
||||
"@vant/markdown-loader": "^2.2.0",
|
||||
"@vant/markdown-vetur": "^1.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/doc",
|
||||
"version": "2.5.6",
|
||||
"version": "2.5.7",
|
||||
"description": "vant document template",
|
||||
"main": "./lib/index.js",
|
||||
"publishConfig": {
|
||||
|
||||
@ -210,14 +210,13 @@ export default {
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
|
||||
+ p code {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,7 +203,7 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
|
||||
| duration | Transition duration, unit second | *number* | `0.3` | 2.0.3 |
|
||||
| get-container | Return the mount node for action-sheet | *string \| () => HTMLElement* | - | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
|
||||
| duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 |
|
||||
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -136,7 +136,7 @@ export default {
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
`Props`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
|
||||
@ -44,13 +44,13 @@ export default {
|
||||
|
||||
### Icon info
|
||||
|
||||
Use `info` prop to show messages in upper right corner of icon
|
||||
Use `info` prop to show badge in icon
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" />
|
||||
<van-goods-action-icon icon="cart-o" text="Icon2" info="5" />
|
||||
<van-goods-action-icon icon="shop-o" text="Icon3" />
|
||||
<van-goods-action-icon icon="shop-o" text="Icon3" info=12" />
|
||||
<van-goods-action-button type="warning" text="Button1" />
|
||||
<van-goods-action-button type="danger" text="Button2" />
|
||||
</van-goods-action>
|
||||
@ -73,7 +73,7 @@ Use `info` prop to show messages in upper right corner of icon
|
||||
|
||||
| Attribute | Description | Type | Default | Version |
|
||||
|------|------|------|------|------|
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
|
||||
@ -42,15 +42,15 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 图标提示
|
||||
### 徽标提示
|
||||
|
||||
通过`info`属性在图标右上角增加相应的提示
|
||||
通过`info`属性在图标右上角显示徽标
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="客服" />
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
|
||||
<van-goods-action-icon icon="shop-o" text="店铺" />
|
||||
<van-goods-action-icon icon="shop-o" text="店铺" info=12" />
|
||||
<van-goods-action-button type="warning" text="加入购物车" />
|
||||
<van-goods-action-button type="danger" text="立即购买" />
|
||||
</van-goods-action>
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
|
||||
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
|
||||
<van-goods-action-icon icon="shop-o" :text="$t('icon3')" />
|
||||
<van-goods-action-icon icon="shop-o" info="12" :text="$t('icon3')" />
|
||||
<van-goods-action-button type="warning" :text="$t('button1')" />
|
||||
<van-goods-action-button type="danger" :text="$t('button2')" />
|
||||
</van-goods-action>
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
icon3: '店铺',
|
||||
button1: '加入购物车',
|
||||
button2: '立即购买',
|
||||
title2: '图标提示',
|
||||
title2: '徽标提示',
|
||||
customButtonColor: '自定义按钮颜色'
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon">
|
||||
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
|
||||
<!---->
|
||||
<div class="van-info">12</div>
|
||||
</div>店铺
|
||||
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
| delete-button-text | Delete button text | *string* | `delete` | - |
|
||||
| show-delete-key | Whether to show delete button | *boolean* | `true` | - |
|
||||
| hide-on-click-outside | Whether to hide keyboard when click outside | *boolean* | `true` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ export default {
|
||||
| delete-button-text | 删除按钮文字 | *string* | `删除` | - |
|
||||
| show-delete-key | 是否展示删除按钮 | *boolean* | `true` | - |
|
||||
| hide-on-click-outside | 点击外部时是否收起键盘 | *boolean* | `true` | - |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -1,31 +1,13 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('default')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@touchstart.stop="keyboard = 'default'"
|
||||
>
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'default'"
|
||||
:close-button-text="$t('close')"
|
||||
extra-key="."
|
||||
safe-area-inset-bottom
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('custom')">
|
||||
<van-button
|
||||
type="info"
|
||||
@touchstart.stop="keyboard = 'custom'"
|
||||
>
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'custom'"
|
||||
@ -37,25 +19,6 @@
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('bindValue')">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
:value="value"
|
||||
:placeholder="$t('clickToInput')"
|
||||
@touchstart.native.stop="keyboard = 'bindValue'"
|
||||
/>
|
||||
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="keyboard === 'bindValue'"
|
||||
maxlength="6"
|
||||
safe-area-inset-bottom
|
||||
@blur="keyboard = ''"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,31 +2,13 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出默认键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
弹出自定义键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i>
|
||||
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-field__body"><input type="text" placeholder="点此输入" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i>
|
||||
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,11 +27,7 @@ export default {
|
||||
|
||||
### Listen to Events
|
||||
|
||||
`search` event will be triggered when click the search button on the keyboard.
|
||||
|
||||
`cancel` event will be triggered when click the cancel button.
|
||||
|
||||
Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
|
||||
`search` event will be triggered when click the search button on the keyboard, `cancel` event will be triggered when click the cancel button.
|
||||
|
||||
```html
|
||||
<form action="/">
|
||||
@ -45,6 +41,8 @@ Tips: There will be a search button on the keyboard when Search is inside a form
|
||||
</form>
|
||||
```
|
||||
|
||||
> Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
|
||||
|
||||
### Custom Button
|
||||
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Search);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
|
||||
v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
|
||||
|
||||
```html
|
||||
<van-search placeholder="请输入搜索关键词" v-model="value" />
|
||||
@ -21,9 +21,7 @@ Vue.use(Search);
|
||||
|
||||
### 事件监听
|
||||
|
||||
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
|
||||
|
||||
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
|
||||
Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发
|
||||
|
||||
```html
|
||||
<form action="/">
|
||||
@ -37,6 +35,8 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
</form>
|
||||
```
|
||||
|
||||
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
|
||||
|
||||
### 自定义按钮
|
||||
|
||||
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。
|
||||
|
||||
@ -83,7 +83,7 @@ Use slot to add custom contents.
|
||||
| loading | Whether to show loading icon | *boolean* | `false` | - |
|
||||
| currency | Currency symbol | *string* | `¥` | - |
|
||||
| decimal-length | number of digits to appear after the decimal point | *number* | `2` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@ Vue.use(SubmitBar);
|
||||
| loading | 是否显示加载中的按钮 | *boolean* | `false` | - |
|
||||
| currency | 货币符号 | *string* | `¥` | - |
|
||||
| decimal-length | 价格小数点后位数 | *number* | `2` | - |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -148,7 +148,7 @@ export default {
|
||||
| active-color | Color of active tab item | *string* | `#1989fa` | - |
|
||||
| inactive-color | Color of inactive tab item | *string* | `#7d7e80` | - |
|
||||
| route | Whether to enable route mode | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
|
||||
|
||||
### Tabbar Events
|
||||
|
||||
|
||||
@ -154,7 +154,7 @@ export default {
|
||||
| active-color | 选中标签的颜色 | *string* | `#1989fa` | - |
|
||||
| inactive-color | 未选中标签的颜色 | *string* | `#7d7e80` | - |
|
||||
| route | 是否开启路由模式 | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | *boolean* | `false` | - |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
|
||||
|
||||
### Tabbar Events
|
||||
|
||||
|
||||
@ -1285,10 +1285,10 @@
|
||||
shelljs "^0.8.2"
|
||||
signale "^1.4.0"
|
||||
|
||||
"@vant/doc@^2.5.6":
|
||||
version "2.5.6"
|
||||
resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.6.tgz#789dc09dab86fd7a0e713aba17eafd8dfbde59f6"
|
||||
integrity sha512-qSX3D+zvDljYoaBD3co7sH+aqO3AgHTtU4WOY5TUqFlapjG+3kw/N8icXDyF9jnRp6Q5WCZaedmhZvAEykL3cQ==
|
||||
"@vant/doc@^2.5.7":
|
||||
version "2.5.7"
|
||||
resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.7.tgz#67ae6bedcdb7caccb73ff43d0d13b626e9d4d622"
|
||||
integrity sha512-1n0/YEFB0QvnNKzzjJAzZIJIInyn3y3UFFr31K3pjb17qdPUPuhg42wEXyFWSLQrOHc9jcUtmcEihD3aQIeL/Q==
|
||||
|
||||
"@vant/eslint-config@^1.2.5":
|
||||
version "1.2.5"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user