wip(VForm): VForm component development

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, markRaw } from 'vue'
 import { ElConfigProvider, ElIcon } from 'element-plus'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 // import en from 'element-plus/lib/locale/lang/en'
@@ -332,8 +332,8 @@ const schema = reactive<VFormSchema[]>([
     label: `${t('formDemo.icon')}1`,
     component: 'Input',
     componentProps: {
-      suffixIcon: Calendar,
-      prefixIcon: Calendar
+      suffixIcon: markRaw(Calendar),
+      prefixIcon: markRaw(Calendar)
     }
   },
   {
@@ -594,8 +594,8 @@ const schema = reactive<VFormSchema[]>([
     component: 'Switch',
     value: false,
     componentProps: {
-      activeIcon: Check,
-      inactiveIcon: Close
+      activeIcon: markRaw(Check),
+      inactiveIcon: markRaw(Close)
     }
   },
   {
@@ -615,11 +615,18 @@ const schema = reactive<VFormSchema[]>([
     component: 'Rate',
     value: null,
     componentProps: {
-      voidIcon: ChatRound,
-      icons: [ChatRound, ChatLineRound, ChatDotRound]
+      voidIcon: markRaw(ChatRound),
+      icons: [markRaw(ChatRound), markRaw(ChatLineRound), markRaw(ChatDotRound)]
     }
   }
 ])
+
+setTimeout(() => {
+  if (schema[2].componentProps) {
+    schema[2].componentProps.placeholder = 'test'
+    console.log(schema[2])
+  }
+}, 3000)
 </script>
 
 <template>

src/components/Form/src/helper.ts

@@ -1,7 +1,6 @@
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
-import { unref } from 'vue'
-import { Slots } from 'vue'
+import type { Slots } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 
 interface PlaceholderMoel {
@@ -76,29 +75,12 @@ export function setGridProp(col: ColProps = {}): ColProps {
  * @returns 默认添加 clearable 属性
  */
 export function setComponentProps(props: Recordable = {}): Recordable {
-  const propsObj = unref(props)
-  // for (const key in propsObj) {
-  //   // 如果传入的是组件，需要让其失去响应式，避免不必要的性能开销
-  //   // 这样判断好像还不太合理。后续看看没有更合理的判断方法
-  //   if (propsObj[key]?.render && isFunction(propsObj[key]?.render)) {
-  //     propsObj[key] = shallowRef(propsObj[key]?.render())
-  //   }
-  //   // if (key === 'icon') {
-  //   //   propsObj[key] = [...propsObj[key]]
-  //   // }
-  // }
   const componentProps: Recordable = {
     clearable: true,
-    ...propsObj
+    ...props
   }
-  // componentProps.icons
-  //   ? (componentProps.icons = (componentProps.icons as Recordable[]).map((v) => {
-  //       return shallowRef(v?.render()?.value)
-  //     }))
-  //   : undefined
   // 需要删除额外的属性
   delete componentProps?.slots
-  console.log(componentProps)
   return componentProps
 }