feat: ✨ 为所有组件补充customStyle属性

✅ Closes: #212

src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]">
+  <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
     <view :class="['wd-card__title-content', customTitleClass]">
       <view class="wd-card__title">
         <text v-if="title">{{ title }}</text>

src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]">
+  <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]" :style="customStyle">
     <view v-if="title || value || useSlot" class="wd-cell-group__title">
       <!--左侧标题-->
       <view class="wd-cell-group__left">

src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue

@@ -1,6 +1,7 @@
 <template>
   <view
     :class="['wd-cell', isBorder ? 'is-border' : '', size ? 'is-' + size : '', center ? 'is-center' : '', customClass]"
+    :style="customStyle"
     :hover-class="isLink || clickable ? 'is-hover' : 'none'"
     hover-stay-time="70"
     @click="onClick"

src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-checkbox-group ${shape === 'button' && cell ? 'is-button' : ''} ${customClass}`">
+  <view :class="`wd-checkbox-group ${shape === 'button' && cell ? 'is-button' : ''} ${customClass}`" :style="customStyle">
     <slot />
   </view>
 </template>

src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue

@@ -5,6 +5,7 @@
     } ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
       innerDisabled ? 'is-disabled' : ''
     } ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
+    :style="customStyle"
     @click="toggle"
   >
     <!--shape为button时，移除wd-checkbox__shape，只保留wd-checkbox__label-->

src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-circle ${customClass}`">
+  <view :class="`wd-circle ${customClass}`" :style="customStyle">
     <canvas :width="canvasSize" :height="canvasSize" :style="style" :id="canvasId" :canvas-id="canvasId"></canvas>
     <view v-if="!text" class="wd-circle__text">
       <!-- 自定义提示内容 -->

src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-col-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`">
+  <view :class="`wd-col-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`" :style="customStyle">
     <view class="wd-col-picker__field" @click="showPicker">
       <slot v-if="useDefaultSlot"></slot>
       <view

src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`">
+  <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
     <view :class="`wd-collapse-item__header  ${isFirst ? 'wd-collapse-item__header-first' : ''}`" @click="handleClick">
       <text class="wd-collapse-item__title">{{ title }}</text>
       <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />

src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-collapse ${viewmore ? 'is-viewmore' : ''} ${customClass}`">
+  <view :class="`wd-collapse ${viewmore ? 'is-viewmore' : ''} ${customClass}`" :style="customStyle">
     <!-- 普通或手风琴 -->
     <block v-if="!viewmore">
       <slot></slot>

src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue

@@ -15,6 +15,7 @@
       @close="close"
       @click-modal="clickModal"
       :custom-class="`wd-curtain ${customClass}`"
+      :custom-style="customStyle"
     >
       <view class="wd-curtain__content">
         <image :src="src" class="wd-curtain__content-img" :style="imgStyle" @click="clickImage" @error="imgErr" @load="imgLoad"></image>

src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue

@@ -2,6 +2,7 @@
   <view>
     <wd-picker-view
       :custom-class="customClass"
+      :custom-style="customStyle"
       ref="datePickerview"
       v-model="pickerValue"
       :columns="columns"

src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue

@@ -3,6 +3,7 @@
     :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
       alignRight ? 'is-align-right' : ''
     } ${error ? 'is-error' : ''} ${customClass}`"
+    :style="customStyle"
   >
     <!--文案-->
     <view class="wd-picker__field" @click="showPopup">

src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-divider ${customClass}`">
+  <view :class="`wd-divider ${customClass}`" :style="customStyle">
     <view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
     <view class="wd-divider__content" :style="color ? 'color: ' + color : ''">
       <slot></slot>

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view v-if="showWrapper" :class="`wd-drop-item  ${customClass}`" :style="`z-index: ${zIndex}; ${positionStyle}`">
+  <view v-if="showWrapper" :class="`wd-drop-item  ${customClass}`" :style="`z-index: ${zIndex}; ${positionStyle};${customStyle}`">
     <wd-popup
       v-model="showPop"
       :z-index="zIndex"

src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="style">
+  <view :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="`${style};${customStyle}`">
     <view :class="`wd-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`" :style="gutterContentStyle">
       <slot v-if="useSlot" />
       <block v-else>

src/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-grid ${customClass}`" :style="gutter ? 'padding-left:' + gutter + 'px;' + 'padding-bottom:' + gutter + 'px;' : ''">
+  <view :class="`wd-grid ${customClass}`" :style="rootStyle">
     <!-- 默认插入的 item -->
     <slot />
   </view>
@@ -17,7 +17,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useChildren } from '../composables/useChildren'
 import { GRID_KEY, gridProps } from './types'
 import { debounce } from '../common/util'
@@ -72,6 +72,10 @@ watch(
   }
 )
 
+const rootStyle = computed(() => {
+  return `${props.gutter ? 'padding-left:' + props.gutter + 'px;' + 'padding-bottom:' + props.gutter + 'px;' : ''}${props.customStyle}`
+})
+
 const handleChildrenChange = debounce(() => {
   init()
 }, 50)

src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 绘制的图片canvas -->
-  <view v-if="modelValue" :class="`wd-img-cropper ${customClass}`" @touchmove="preventTouchMove">
+  <view v-if="modelValue" :class="`wd-img-cropper ${customClass}`" :style="customStyle" @touchmove="preventTouchMove">
     <!-- 展示在用户面前的裁剪框 -->
     <view class="wd-img-cropper__wrapper">
       <!-- 画出裁剪框 -->

src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`">
+  <view :class="`wd-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
     <view :class="`wd-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`" @click="sub">
       <wd-icon name="decrease" custom-class="wd-input-number__action-icon"></wd-icon>
     </view>

src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="['wd-loadmore', customClass]" @click="reload">
+  <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
     <wd-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</wd-divider>
     <block v-if="state === 'error'">
       <block v-if="errorText">

src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue

@@ -1,5 +1,9 @@
 <template>
-  <view v-if="show" :class="`wd-notice-bar ${customClass} ${noticeBarClass}`" :style="`color: ${color}; background: ${backgroundColor};`">
+  <view
+    v-if="show"
+    :class="`wd-notice-bar ${customClass} ${noticeBarClass}`"
+    :style="`color: ${color}; background: ${backgroundColor};${customStyle}`"
+  >
     <wd-icon v-if="prefix" custom-class="wd-notice-bar__prefix" size="18px" :name="prefix"></wd-icon>
     <slot v-else name="prefix"></slot>
     <view class="wd-notice-bar__wrap">

src/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-pager ${customClass}`" v-if="!(hideIfOnePage && totalPageNum === 1)">
+  <view :class="`wd-pager ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
     <view class="wd-pager__content">
       <wd-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="wd-pager__nav" @click="sub">
         <text v-if="!showIcon">{{ prevText || translate('prev') }}</text>

src/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="wd-password-input">
+  <view :class="`wd-password-input ${customClass}`" :style="customStyle">
     <view @touchstart="onTouchStart" class="wd-password-input__security">
       <view
         v-for="(_, index) in length"

src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-picker-view ${customClass}`">
+  <view :class="`wd-picker-view ${customClass}`" :style="customStyle">
     <view class="wd-picker-view__loading" v-if="loading">
       <wd-loading :color="loadingColor" />
     </view>

src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue

@@ -3,6 +3,7 @@
     :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
       alignRight ? 'is-align-right' : ''
     } ${error ? 'is-error' : ''} ${customClass}`"
+    :style="customStyle"
   >
     <!--文案-->
     <view class="wd-picker__field" @click="showPopup">

src/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-popover ${customClass}`" id="popover" @click.stop="popover.noop">
+  <view :class="`wd-popover ${customClass}`" :style="customStyle" id="popover" @click.stop="popover.noop">
     <!-- TODO 插槽情况监听会有问题 待调整， 用于为渲染获取宽高的元素 -->
     <view class="wd-popover__pos wd-popover__hidden" id="pos">
       <view :class="`wd-popover__container ${customPop}`">

src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-progress ${customClass}`">
+  <view :class="`wd-progress ${customClass}`" :style="customStyle">
     <!--进度条-->
     <view class="wd-progress__outer">
       <view :class="`wd-progress__inner ${progressClass}`" :style="rootStyle"></view>

src/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`">
+  <view :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`" :style="customStyle">
     <slot />
   </view>
 </template>

src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue

@@ -5,6 +5,7 @@
     } ${innerInline ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${innerShape !== 'check' ? 'is-' + innerShape : ''} ${
       innerDisabled ? 'is-disabled' : ''
     } ${customClass}`"
+    :style="customStyle"
     @click="handleClick"
   >
     <view

src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-rate ${customClass}`">
+  <view :class="`wd-rate ${customClass}`" :style="customStyle">
     <view
       v-for="(rate, index) in rateList"
       :key="index"

src/uni_modules/wot-design-uni/components/wd-row/wd-row.vue

@@ -43,8 +43,8 @@ function setGutter() {
     console.error('[wot design] warning(wd-row): attribute gutter must be greater than or equal to 0')
   }
   const margin = `${gutter / 2}px`
-  const customStyle = gutter ? `margin-left: -${margin}; margin-right: -${margin};` : ''
-  style.value = customStyle
+  const gutterStyle = gutter ? `margin-left: -${margin}; margin-right: -${margin};` : ''
+  style.value = `${gutterStyle}${props.customStyle}`
 }
 </script>
 <style lang="scss" scoped>

src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-select-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`">
+  <view :class="`wd-select-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`" :style="customStyle">
     <view class="wd-select-picker__field" @click="open">
       <slot v-if="useDefaultSlot"></slot>
       <view

src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: weisheng
  * @Date: 2024-03-15 11:36:12
- * @LastEditTime: 2024-03-15 14:26:00
+ * @LastEditTime: 2024-04-01 20:24:22
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-skeleton\wd-skeleton.vue
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue
  * 记得注释
 -->
 <template>
-  <view class="wd-skeleton" :class="[props.customClass]" :style="props.customStyle">
+  <view :class="`wd-skeleton ${customClass}`" :style="customStyle">
     <view class="wd-skeleton__content" v-if="parsedRowCols.length">
       <view class="wd-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
         <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />

src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="rootClass" :id="sliderId">
+  <view :class="rootClass" :style="customStyle" :id="sliderId">
     <!-- #ifdef MP-DINGTALK -->
     <view :id="sliderId" style="flex: 1" :class="rootClass">
       <!-- #endif -->

src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-sort-button ${line ? 'wd-sort-button--line' : ''} ${customClass}`" @click="handleClick">
+  <view :class="`wd-sort-button ${line ? 'wd-sort-button--line' : ''} ${customClass}`" :style="customStyle" @click="handleClick">
     <view class="wd-sort-button__wrapper">
       <view :class="`wd-sort-button__left ${modelValue !== 0 ? 'is-active' : ''}`">
         {{ title }}

src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue

@@ -4,7 +4,7 @@
     :class="`wd-step ${customClass} ${currentStatus ? 'is-' + currentStatus : ''} ${canAlignCenter ? 'is-center' : ''}  ${
       vertical ? 'is-vertical' : ''
     }`"
-    :style="styles"
+    :style="rootStyle"
   >
     <view :class="`wd-step__header  ${dot ? 'is-dot' : ''}`">
       <view :class="`wd-step__icon  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`">
@@ -45,9 +45,10 @@ export default {
 import { computed } from 'vue'
 import { useParent } from '../composables/useParent'
 import { STEPS_KEY } from '../wd-steps/types'
-import { isDef } from '../common/util'
+import { isDef, objToStyle } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { stepProps } from './types'
+import type { CSSProperties } from 'vue'
 
 const props = defineProps(stepProps)
 
@@ -62,8 +63,19 @@ const currentStatus = computed(() => {
 const currentTitle = computed(() => {
   return getCurrentTitle(currentStatus.value)
 })
-const styles = computed(() => {
-  return getStyles()
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (steps) {
+    const { vertical, space } = steps.props
+    if (vertical) {
+      if (isDef(space)) {
+        style['height'] = space
+      }
+    } else {
+      style['width'] = space || 100 / steps.children.length + '%'
+    }
+  }
+  return `${objToStyle(style)};${props.customStyle}`
 })
 
 const canAlignCenter = computed(() => {
@@ -98,18 +110,6 @@ const childrenLength = computed(() => {
   }
 })
 
-function getStyles() {
-  if (steps) {
-    const { vertical, space } = steps.props
-    if (vertical) {
-      return space ? `height: ${space}` : ''
-    } else {
-      return `width: ${space || 100 / steps.children.length + '%'}`
-    }
-  } else {
-    return ''
-  }
-}
 function getCurrentStatus(index: number) {
   if (props.status) {
     return props.status

src/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue

@@ -1,6 +1,6 @@
 <template>
   <view style="position: relative">
-    <view :class="`wd-sticky-box ${props.customClass}`" :id="styckyBoxId">
+    <view :class="`wd-sticky-box ${props.customClass}`" :style="customStyle" id="styckyBoxId">
       <wd-resize @resize="resizeHandler">
         <slot />
       </wd-resize>

src/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue

@@ -2,6 +2,7 @@
   <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
   <view
     :class="`wd-swipe-action ${customClass}`"
+    :style="customStyle"
     @click.stop="onClick()"
     @touchstart="startDrag"
     @touchmove="onDrag"

src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue

@@ -31,7 +31,7 @@ const rootStyle = computed(() => {
     background: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
     'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
   }
-  return objToStyle(rootStyle)
+  return `${objToStyle(rootStyle)};${props.customStyle}`
 })
 
 const circleStyle = computed(() => {

src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-tab ${customClass}`">
+  <view :class="`wd-tab ${customClass}`" :style="customStyle">
     <view v-if="painted" class="wd-tab__body" :style="isShow ? '' : 'display: none;'">
       <slot />
     </view>

src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="wd-tabbar-item" :style="customStyle" @click="handleClick">
+  <view :class="`wd-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
     <wd-badge :modelValue="value" v-bind="badgeProps" :is-dot="isDot" :max="max">
       <view class="wd-tabbar-item__body">
         <slot name="icon" :active="active"></slot>