docs: update icon prop description (#10094)

* docs: update icon prop description

* docs: update
This commit is contained in:
neverland 2021-12-23 20:52:51 +08:00 committed by GitHub
parent 31930e47d8
commit 79e58d5b9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 36 additions and 32 deletions

View File

@ -21,7 +21,7 @@ pre {
margin: 20px 0 0;
+ p {
margin-top: 20px;
margin-top: 20px !important;
}
}

View File

@ -117,7 +117,7 @@ export default {
| text | 按钮文字 | _string_ | - |
| type | 按钮类型,可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| color | 按钮颜色,支持传入 `linear-gradient` 渐变色 | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| disabled | 是否禁用按钮 | _boolean_ | `false` |
| loading | 是否显示为加载状态 | _boolean_ | `false` |
| url | 点击后跳转的链接地址 | _string_ | - |

View File

@ -187,7 +187,7 @@ export default {
| cancel-text | 取消按钮文字 | _string_ | - |
| description | 选项上方的描述信息 | _string_ | - |
| closeable | 是否显示关闭图标 | _boolean_ | `true` |
| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
| close-icon | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| duration | 动画时长,单位秒,设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
| round | 是否显示圆角 | _boolean_ | `true` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` |

View File

@ -138,7 +138,7 @@ app.use(Button);
| size | 尺寸,可选值为 `large` `small` `mini` | _string_ | `normal` |
| text | 按钮文字 | _string_ | - |
| color | 按钮颜色,支持传入 `linear-gradient` 渐变色 | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| icon-position | 图标展示位置,可选值为 `right` | _string_ | `left` |
| tag | 按钮根节点的 HTML 标签 | _string_ | `button` |

View File

@ -263,7 +263,7 @@ export default {
| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
| swipeable `v3.0.11` | 是否开启手势左右滑动切换 | _boolean_ | `false` |
| closeable | 是否显示关闭图标 | _boolean_ | `true` |
| close-icon `v3.0.10` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
| close-icon `v3.0.10` | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
### CascaderOption 数据结构

View File

@ -157,7 +157,7 @@ app.use(CellGroup);
| value | 右侧内容 | _number \| string_ | - |
| label | 标题下方的描述信息 | _string_ | - |
| size | 单元格大小,可选值为 `large` | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象,等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

View File

@ -145,7 +145,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 唯一标识符,默认为索引值 | _number \| string_ | `index` |
| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 标题栏左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| size | 标题栏大小,可选值为 `large` | _string_ | - |
| title | 标题栏左侧内容 | _number \| string_ | - |
| value | 标题栏右侧内容 | _number \| string_ | - |

View File

@ -222,11 +222,11 @@ dropdownItemRef.value?.toggle();
### Option 数据结构
| 键名 | 说明 | 类型 |
| ----- | -------------------------------------- | ------------------ |
| text | 文字 | _string_ |
| value | 标识符 | _number \| string_ |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
| 键名 | 说明 | 类型 |
| --- | --- | --- |
| text | 文字 | _string_ |
| value | 标识符 | _number \| string_ |
| icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ |
## 主题定制

View File

@ -281,7 +281,7 @@ export default {
| required | 是否显示表单必填星号 | _boolean_ | `false` |
| center | 是否使内容垂直居中 | _boolean_ | `false` |
| clearable | 是否启用清除图标,点击清除图标后会清空输入框 | _boolean_ | `false` |
| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
| clear-icon `v3.0.12` | 清除图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `clear` |
| clear-trigger | 显示清除图标的时机,`always` 表示输入框不为空时展示,<br>`focus` 表示输入框聚焦且不为空时展示 | _FieldClearTrigger_ | `focus` |
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
@ -298,8 +298,8 @@ export default {
| label-align | 左侧文本对齐方式,可选值为 `center` `right` | _FieldTextAlign_ | `left` |
| input-align | 输入框对齐方式,可选值为 `center` `right` | _FieldTextAlign_ | `left` |
| autosize | 是否自适应内容高度,只对 textarea 有效,<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }<br>单位为`px` | _boolean \| FieldAutosizeConfig_ | `false` |
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| left-icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| right-icon | 右侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| rules | 表单校验规则,详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _FieldRule[]_ | - |
| autocomplete `v3.0.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |

View File

@ -134,7 +134,7 @@ app.use(GridItem);
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 文字 | _string_ | - |
| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| icon-color | 图标颜色,等同于 Icon 组件的 [color 属性](#/zh-CN/icon#props) | _string_ | - |
| reverse `v3.1.0` | 是否调换图标和文本的位置 | _boolean_ | `false` |

View File

@ -111,8 +111,8 @@ app.use(Lazyload);
| lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
| show-error | 是否展示图片加载失败提示 | _boolean_ | `true` |
| show-loading | 是否展示图片加载中提示 | _boolean_ | `true` |
| error-icon | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
| loading-icon | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
| error-icon | 失败时提示的图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photo-fail` |
| loading-icon | 加载时提示的图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photo` |
| icon-size `v3.0.11` | 加载图标和失败图标的大小 | _number \| string_ | `32px` |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |

View File

@ -114,7 +114,7 @@ app.use(NoticeBar);
| text | 通知文本内容 | _string_ | `''` |
| color | 通知文本颜色 | _string_ | `#ed6a0c` |
| background | 滚动条背景 | _string_ | `#fffbe8` |
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| left-icon | 左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| delay | 动画延迟时间 (s) | _number \| string_ | `1` |
| speed | 滚动速率 (px/s) | _number \| string_ | `60` |
| scrollable | 是否开启滚动播放,内容长度溢出时默认开启 | _boolean_ | - |

View File

@ -114,7 +114,7 @@ bottom-end # 底部右侧位置
### 展示图标
`actions` 数组中,可以通过 `icon` 字段来定义选项的图标,支持传入[图标名称](#/zh-CN/icon)或图片链接
`actions` 数组中,可以通过 `icon` 字段来定义选项的图标,支持传入图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props)。
```html
<van-popover v-model:show="showPopover" :actions="actions">
@ -244,7 +244,7 @@ export default {
| 键名 | 说明 | 类型 |
| --- | --- | --- |
| text | 选项文字 | _string_ |
| icon | 文字左侧的图标,支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
| icon | 文字左侧的图标,支持传入图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ |
| color | 选项文字颜色 | _string_ |
| disabled | 是否为禁用状态 | _boolean_ |
| className | 为对应选项添加额外的类名 | _string \| Array \| object_ |

View File

@ -124,7 +124,7 @@ export default {
| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
| close-icon | 关闭图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
| close-icon-position | 关闭图标位置,可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| before-close `v3.1.4` | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| icon-prefix `v3.0.18` | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |

View File

@ -158,8 +158,8 @@ export default {
| color | 选中时的颜色 | _string_ | `#ee0a24` |
| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
| void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star-o` |
| icon | 选中时的图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star` |
| void-icon | 未选中时的图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star-o` |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| allow-half | 是否允许半选 | _boolean_ | `false` |
| readonly | 是否为只读状态,只读状态下无法修改评分 | _boolean_ | `false` |

View File

@ -139,7 +139,7 @@ export default {
| maxlength | 输入的最大字符数 | _number \| string_ | - |
| placeholder | 占位提示文字 | _string_ | - |
| clearable | 是否启用清除图标,点击清除图标后会清空输入框 | _boolean_ | `true` |
| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
| clear-icon `v3.0.12` | 清除图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `clear` |
| clear-trigger | 显示清除图标的时机,`always` 表示输入框不为空时展示,<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
| autofocus | 是否自动聚焦iOS 系统不支持该属性 | _boolean_ | `false` |
| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
@ -151,8 +151,8 @@ export default {
| formatter `v3.0.12` | 输入内容格式化函数 | _(val: string) => string_ | - |
| format-trigger `v3.0.12` | 格式化函数触发的时机,可选值为 `onBlur` | _string_ | `onChange` |
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | _string_ | `left` |
| left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `search` |
| right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| left-icon | 输入框左侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `search` |
| right-icon | 输入框右侧图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| autocomplete `v3.2.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
### Events

View File

@ -108,7 +108,7 @@ export default {
| button-type | 按钮类型 | _string_ | `danger` |
| button-color | 自定义按钮颜色 | _string_ | - |
| tip | 在订单栏上方的提示文案 | _string_ | - |
| tip-icon | 提示文案左侧的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| tip-icon | 提示文案左侧的图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| currency | 货币符号 | _string_ | `¥` |
| disabled | 是否禁用按钮 | _boolean_ | `false` |
| loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` |

View File

@ -198,7 +198,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 标签名称,作为匹配的标识符 | _number \| string_ | 当前标签的索引值 |
| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| icon-prefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge | 图标右上角徽标的内容 | _number \| string_ | - |

View File

@ -46,7 +46,7 @@ Toast.fail('失败文案');
### 自定义图标
通过 `icon` 选项可以自定义图标,支持传入[图标名称](#/zh-CN/icon)或图片链接,通过`loadingType` 属性可以自定义加载图标类型
通过 `icon` 选项可以自定义图标,支持传入图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props)
```js
Toast({
@ -58,7 +58,11 @@ Toast({
message: '自定义图片',
icon: 'https://img.yzcdn.cn/vant/logo.png',
});
```
通过`loadingType` 属性可以自定义加载图标类型。
```js
Toast.loading({
message: '加载中...',
forbidClick: true,
@ -169,7 +173,7 @@ Toast.resetDefaultOptions('loading');
| type | 提示类型,可选值为 `loading` `success`<br>`fail` `html` | _ToastType_ | `text` |
| position | 位置,可选值为 `top` `bottom` | _ToastPosition_ | `middle` |
| message | 文本内容,支持通过`\n`换行 | _string_ | `''` |
| icon | 自定义图标,支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon | 自定义图标,支持传入图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| iconSize | 图标大小,如 `20px` `2em`,默认单位为 `px` | _number \| string_ | `36px` |
| iconPrefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| overlay | 是否显示背景遮罩层 | _boolean_ | `false` |

View File

@ -333,7 +333,7 @@ export default {
| result-type | 文件读取结果类型,可选值为 `file` `text` | _string_ | `dataUrl` |
| upload-text | 上传区域文字提示 | _string_ | - |
| image-fit | 预览图裁剪模式,可选值见 [Image](#/zh-CN/image) 组件 | _string_ | `cover` |
| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photograph` |
| upload-icon | 上传区域图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photograph` |
> 注意accept、capture 和 multiple 为浏览器 input 标签的原生属性,移动端各种机型对这些属性的支持程度有所差异,因此在不同机型和 WebView 下可能出现一些兼容性问题。