From 130e1ac7a63d2ecc2a9a722554567d365a13254d Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 28 Feb 2020 15:40:46 +0800 Subject: [PATCH] feat(Button): add icon-prefix prop (#5666) --- src/button/README.md | 1 + src/button/README.zh-CN.md | 5 +++-- src/button/index.tsx | 5 ++++- src/cell/README.md | 4 ++-- src/cell/README.zh-CN.md | 4 ++-- src/grid/README.md | 2 +- src/grid/README.zh-CN.md | 2 +- src/icon/README.zh-CN.md | 2 +- src/toast/README.zh-CN.md | 2 +- 9 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/button/README.md b/src/button/README.md index a0164f6c1..ed7ce0f34 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -106,6 +106,7 @@ Vue.use(Button); | text | Text | *string* | - | | color `v2.1.8` | Color, support linear-gradient | *string* | - | | icon | Left Icon | *string* | - | +| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | tag | HTML Tag | *string* | `button` | | native-type | Native Type Attribute | *string* | `''` | | plain | Whether to be plain button | *boolean* | `false` | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index a8c53967f..a89fd5aec 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -128,8 +128,9 @@ Vue.use(Button); | text | 按钮文字 | *string* | - | | color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| tag | HTML 标签 | *string* | `button` | -| native-type | 原生 button 标签 type 属性 | *string* | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | +| tag | 根节点的 HTML 标签 | *string* | `button` | +| native-type | 原生 button 标签的 type 属性 | *string* | - | | block | 是否为块级元素 | *boolean* | `false` | | plain | 是否为朴素按钮 | *boolean* | `false` | | square | 是否为方形按钮 | *boolean* | `false` | diff --git a/src/button/index.tsx b/src/button/index.tsx index 17032eec4..e85866d58 100644 --- a/src/button/index.tsx +++ b/src/button/index.tsx @@ -31,6 +31,7 @@ export type ButtonProps = RouteProps & { hairline?: boolean; disabled?: boolean; nativeType?: string; + iconPrefix?: string; loadingSize: string; loadingType?: LoadingType; loadingText?: string; @@ -119,7 +120,9 @@ function Button( /> ); } else if (icon) { - content.push(); + content.push( + + ); } let text; diff --git a/src/cell/README.md b/src/cell/README.md index 0181dfc31..9487a17c0 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -114,11 +114,12 @@ Vue.use(CellGroup); | Attribute | Description | Type | Default | |------|------|------|------| -| icon | Left Icon | *string* | - | | title | Title | *number \| string* | - | | value | Right text | *number \| string* | - | | label | Description below the title | *string* | - | | size | Size，can be set to `large` | *string* | - | +| icon | Left Icon | *string* | - | +| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | border | Whether to show inner border | *boolean* | `true` | | center | Whether to center content vertically | *boolean* | `true` | | url | Link URL | *string* | - | @@ -132,7 +133,6 @@ Vue.use(CellGroup); | title-class | Title className | *any* | - | | value-class | Value className | *any* | - | | label-class | Label className | *any* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | ### Cell Events diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 93c2ce482..30fbff2cc 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -125,11 +125,12 @@ Vue.use(CellGroup); | 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | title | 左侧标题 | *number \| string* | - | | value | 右侧内容 | *number \| string* | - | | label | 标题下方的描述信息 | *string* | - | | size | 单元格大小，可选值为 `large` | *string* | - | +| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 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* | - | | border | 是否显示内边框 | *boolean* | `true` | @@ -143,7 +144,6 @@ Vue.use(CellGroup); | title-class | 左侧标题额外类名 | *any* | - | | value-class | 右侧内容额外类名 | *any* | - | | label-class | 描述信息额外类名 | *any* | - | -| icon-prefix `v2.5.3` | 图标类名前缀 | *string* | `van-icon` | ### Cell Events diff --git a/src/grid/README.md b/src/grid/README.md index 9018a9172..5ce182b2a 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -116,12 +116,12 @@ Vue.use(GridItem); |------|------|------|------| | text | Text | *string* | - | | icon | Icon name or URL | *string* | - | +| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | dot `v2.2.1` | Whether to show red dot | *boolean* | `false` | | info `v2.2.1` | Content of the badge | *number \| string* | - | | url | Link URL | *string* | - | | to | Target route of the link, same as to of vue-router | *string \| object* | - | | replace | If true, the navigation will not leave a history record | *boolean* | `false` | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | ### GridItem Events diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index b45f57f1c..4e2035911 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -134,12 +134,12 @@ Vue.use(GridItem); |------|------|------|------| | text | 文字 | *string* | - | | icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` | | info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - | | url | 点击后跳转的链接地址 | *string* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | -| icon-prefix `v2.5.3` | 图标类名前缀 | *string* | `van-icon` | ### GridItem Events diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index 23e06b76c..338c435b4 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -96,7 +96,7 @@ import 'vant/lib/icon/local.css'; | info | 图标右上角徽标的内容 | *number \| string* | - | | color | 图标颜色 | *string* | `inherit` | | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *number \| string* | `inherit` | -| class-prefix | 类名前缀 | *string* | `van-icon` | +| class-prefix | 类名前缀，用于使用自定义图标 | *string* | `van-icon` | | tag | HTML 标签 | *string* | `i` | ### Events diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 3b4af4e9e..af26fb974 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -145,7 +145,7 @@ Toast.resetDefaultOptions('loading'); | position | 位置，可选值为 `top` `bottom` | *string* | `middle` | | message | 文本内容，支持通过`\n`换行 | *string* | `''` | - | | icon `v2.0.1` | 自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| iconPrefix `v2.0.9` | 图标类名前缀 | *string* | `van-icon` | +| iconPrefix `v2.0.9` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | overlay `v2.2.13` | 是否显示背景遮罩层 | *boolean* | `false` | | forbidClick | 是否禁止背景点击 | *boolean* | `false` | | closeOnClick `v2.1.5` | 是否在点击后关闭 | *boolean* | `false` |