fix: 🐛 修复 RootPortal 及 Picker 相关组件 type-check 错误的问题

Author: Moonofweisheng

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) => {

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) => {

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) => {

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(() => {

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">

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) => {