mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: update icon prop description (#10094)
* docs: update icon prop description * docs: update
This commit is contained in:
parent
31930e47d8
commit
79e58d5b9a
@ -21,7 +21,7 @@ pre {
|
||||
margin: 20px 0 0;
|
||||
|
||||
+ p {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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_ | - |
|
||||
|
@ -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` |
|
||||
|
@ -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` |
|
||||
|
@ -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 数据结构
|
||||
|
@ -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_ | - |
|
||||
|
@ -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_ | - |
|
||||
|
@ -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_ |
|
||||
|
||||
## 主题定制
|
||||
|
||||
|
@ -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_ | - |
|
||||
|
@ -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` |
|
||||
|
@ -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` |
|
||||
|
||||
|
@ -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_ | - |
|
||||
|
@ -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_ |
|
||||
|
@ -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` |
|
||||
|
@ -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` |
|
||||
|
@ -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
|
||||
|
@ -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` |
|
||||
|
@ -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_ | - |
|
||||
|
@ -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` |
|
||||
|
@ -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 下可能出现一些兼容性问题。
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user