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 | - | - | - | | title | 标题 | string | - | - | - |
| value | 右侧内容 | string | - | - | - | | value | 右侧内容 | string | - | - | - |
| icon | 图标类名 | string | - | - | - | | icon | 图标类名 | string | - | - | - |
| icon-size | 图标大小 | string \| number | - | - | $LOWEST_VERSION$ |
| label | 描述信息 | string | - | - | - | | label | 描述信息 | string | - | - | - |
| is-link | 是否为跳转链接 | boolean | - | false | - | | is-link | 是否为跳转链接 | boolean | - | false | - |
| to | 跳转地址 | string | - | - | - | | to | 跳转地址 | string | - | - | - |

View File

@ -70,7 +70,7 @@
|-----|------|-----|-------|-------|---------| |-----|------|-----|-------|-------|---------|
| name | 图标名称或图片链接 | string | - | - | - | | name | 图标名称或图片链接 | string | - | - | - |
| color | 图标的颜色 | string | - | inherit | - | | color | 图标的颜色 | string | - | inherit | - |
| size | 图标的字体大小 | string | - | inherit | - | | size | 图标的字体大小 | string \| number | - | inherit | - |
| classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 | | classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 |
| custom-style | 根节点样式 | string | - | - | - | | 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 | - | - | | title | Left title | string | - | - |
| value | Right content | string | - | - | | value | Right content | string | - | - |
| icon | Left icon class name, see Icon component for optional values | 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' | - | | icon-prefix | Icon class name prefix, same as Icon component | string | 'wd-icon' | - |
| label | Description below the title | string | - | - | | label | Description below the title | string | - | - |
| is-link | Whether to show the right arrow and click effect | boolean | false | - | | 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 | - | - | | name | Icon name or image URL | string | - | - |
| color | Icon color | string | - | - | | color | Icon color | string | - | - |
| size | Icon size | string | - | - | | size | Icon size | string \| number | - | - |
| class-prefix | Custom icon class prefix | string | wd-icon | - | | class-prefix | Custom icon class prefix | string | wd-icon | - |
| custom-style | Custom root node style | string | - | - | | custom-style | Custom root node style | string | - | - |

View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes } from 'vue' 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' import { type FormItemRule } from '../wd-form/types'
@ -17,6 +17,10 @@ export const cellProps = {
* *
*/ */
icon: String, 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> <text v-if="isRequired && markerSide === 'before'" class="wd-cell__required wd-cell__required--left">*</text>
<!--左侧icon部位--> <!--左侧icon部位-->
<slot name="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> </slot>
<view class="wd-cell__title"> <view class="wd-cell__title">

View File

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