feat: Cell 新增 icon-siz 属性用于指定左侧图标大小 (#1298)

 Closes: #1088
This commit is contained in:
不如摸鱼去 2025-09-14 13:23:50 +08:00 committed by GitHub
parent 5e186ea4b2
commit 9585db1150
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 11 additions and 4 deletions

View File

@ -251,6 +251,7 @@ function handleSwitchChange({ value }) {
| title | 标题 | string | - | - | - |
| value | 右侧内容 | string | - | - | - |
| icon | 图标类名 | string | - | - | - |
| icon-size | 图标大小 | string \| number | - | - | $LOWEST_VERSION$ |
| label | 描述信息 | string | - | - | - |
| is-link | 是否为跳转链接 | boolean | - | false | - |
| to | 跳转地址 | string | - | - | - |

View File

@ -70,7 +70,7 @@
|-----|------|-----|-------|-------|---------|
| name | 图标名称或图片链接 | string | - | - | - |
| color | 图标的颜色 | string | - | inherit | - |
| size | 图标的字体大小 | string | - | inherit | - |
| size | 图标的字体大小 | string \| number | - | inherit | - |
| classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 |
| custom-style | 根节点样式 | string | - | - | - |

View File

@ -105,6 +105,7 @@ The `center` attribute sets whether the left and right content of the cell is ve
| title | Left title | string | - | - |
| value | Right content | string | - | - |
| icon | Left icon class name, see Icon component for optional values | string | - | - |
| icon-size | Icon size | string \| number | - | $LOWEST_VERSION$ |
| icon-prefix | Icon class name prefix, same as Icon component | string | 'wd-icon' | - |
| label | Description below the title | string | - | - |
| is-link | Whether to show the right arrow and click effect | boolean | false | - |

View File

@ -54,7 +54,7 @@ Set the `name` attribute to an image URL to use image icons. The component autom
| ------------ | ------------------------ | ------ | ------- | ------- |
| name | Icon name or image URL | string | - | - |
| color | Icon color | string | - | - |
| size | Icon size | string | - | - |
| size | Icon size | string \| number | - | - |
| class-prefix | Custom icon class prefix | string | wd-icon | - |
| custom-style | Custom root node style | string | - | - |

View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp } from '../common/props'
import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp, numericProp } from '../common/props'
import { type FormItemRule } from '../wd-form/types'
@ -17,6 +17,10 @@ export const cellProps = {
*
*/
icon: String,
/**
*
*/
iconSize: numericProp,
/**
*
*/

View File

@ -11,7 +11,7 @@
<text v-if="isRequired && markerSide === 'before'" class="wd-cell__required wd-cell__required--left">*</text>
<!--左侧icon部位-->
<slot name="icon">
<wd-icon v-if="icon" :name="icon" :custom-class="`wd-cell__icon ${customIconClass}`"></wd-icon>
<wd-icon v-if="icon" :name="icon" :size="iconSize" :custom-class="`wd-cell__icon ${customIconClass}`"></wd-icon>
</slot>
<view class="wd-cell__title">

View File

@ -167,6 +167,7 @@ export default {
import wdPopup from '../wd-popup/wd-popup.vue'
import wdDatetimePickerView from '../wd-datetime-picker-view/wd-datetime-picker-view.vue'
import wdCell from '../wd-cell/wd-cell.vue'
import wdIcon from '../wd-icon/wd-icon.vue'
import { computed, getCurrentInstance, nextTick, onBeforeMount, onMounted, ref, watch } from 'vue'
import { deepClone, isArray, isDef, isEqual, isFunction, padZero } from '../common/util'
import { type DatetimePickerViewInstance, type DatetimePickerViewColumnType, type DatetimePickerViewExpose } from '../wd-datetime-picker-view/types'