diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 90460a45..423bf3d9 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -13,9 +13,7 @@
         :clickable="!disabled && !readonly"
         :value-align="alignRight ? 'right' : 'left'"
         :center="center"
-        :custom-class="`wd-calendar__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${error && 'is-error'} ${
-          !showValue ? 'wd-calendar__cell--placeholder' : ''
-        }`"
+        :custom-class="cellClass"
         :custom-style="customStyle"
         :custom-title-class="customLabelClass"
         :custom-value-class="customValueClass"
@@ -263,6 +261,15 @@ const showValue = computed(() => {
   }
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-calendar__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-calendar__cell--placeholder')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (val, oldVal) => {
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
index fceb4b85..25c5c0cb 100644
--- a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
@@ -11,9 +11,7 @@
       :rules="rules"
       :clickable="!disabled && !readonly"
       :value-align="alignRight ? 'right' : 'left'"
-      :custom-class="`wd-col-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${error && 'is-error'} ${
-        !showValue ? 'wd-col-picker__cell--placeholder' : ''
-      }`"
+      :custom-class="cellClass"
       :custom-style="customStyle"
       :custom-title-class="customLabelClass"
       :custom-value-class="customValueClass"
@@ -158,6 +156,15 @@ const showValue = computed(() => {
   }
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-col-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-col-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (newValue) => {
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
index c70e601a..0e864946 100644
--- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -10,7 +10,7 @@
       :rules="rules"
       :clickable="!disabled && !readonly"
       :value-align="alignRight ? 'right' : 'left'"
-      :custom-class="`wd-datetime-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${error && 'is-error'}`"
+      :custom-class="cellClass"
       :custom-style="customStyle"
       :custom-title-class="customLabelClass"
       :custom-value-class="customValueClass"
@@ -196,6 +196,14 @@ const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按
 const isLoading = ref<boolean>(false) // 加载
 const { proxy } = getCurrentInstance() as any
 
+const cellClass = computed(() => {
+  const classes = ['wd-datetime-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (val, oldVal) => {
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
index 13ef6c3f..3cc4c5ed 100644
--- a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
@@ -16,9 +16,7 @@
       :rules="rules"
       :clickable="!disabled && !readonly"
       :value-align="alignRight ? 'right' : 'left'"
-      :custom-class="`wd-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${error && 'is-error'} ${
-        !showValue ? 'wd-picker__cell--placeholder' : ''
-      }`"
+      :custom-class="cellClass"
       :custom-style="customStyle"
       :custom-title-class="customLabelClass"
       :custom-value-class="customValueClass"
@@ -199,6 +197,15 @@ const showArrow = computed(() => {
   return !props.disabled && !props.readonly && !showClear.value
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
 const { proxy } = getCurrentInstance() as any
 
 onMounted(() => {
diff --git a/src/uni_modules/wot-design-uni/components/wd-root-portal/wd-root-portal.vue b/src/uni_modules/wot-design-uni/components/wd-root-portal/wd-root-portal.vue
index e389f3b7..a038e692 100644
--- a/src/uni_modules/wot-design-uni/components/wd-root-portal/wd-root-portal.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-root-portal/wd-root-portal.vue
@@ -29,6 +29,7 @@ export default {
   }
 }
 </script>
+<script lang="ts" setup></script>
 
 <!-- #ifdef APP-PLUS -->
 <script module="render" lang="renderjs">
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
index ca620123..c1c18438 100644
--- a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
@@ -12,9 +12,7 @@
       :clickable="!disabled && !readonly"
       :value-align="alignRight ? 'right' : 'left'"
       :center="center"
-      :custom-class="`wd-select-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${error && 'is-error'} ${
-        showValue ? '' : 'wd-select-picker__cell--placeholder'
-      }`"
+      :custom-class="cellClass"
       :custom-style="customStyle"
       :custom-title-class="customLabelClass"
       :custom-value-class="customValueClass"
@@ -173,6 +171,15 @@ const showValue = computed(() => {
   return showValueTemp
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-select-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-select-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (newValue) => {