自动导入组件

src/App.vue

@@ -1,15 +1,5 @@
 <script setup>
 import { RouterView } from 'vue-router'
-// const modules = import.meta.glob('./views/test/**/index.vue');
-// console.log(2,modules)
-// Object.keys(modules).map(async (path) => {
-//   const routePath = path
-//     .replace('../views/', '')
-//     .replace('/index.vue', '');
-//     let com = await modules[path]()
-//     console.log(com)
-//     console.log(routePath)
-// })
 </script>
 
 <template>

src/main.js

@@ -11,7 +11,12 @@ import '@/style/index.scss'
 import 'ant-design-vue/dist/reset.css';
 
 const app = createApp(App)
+
 app.component('Empty', Empty);
+
+import { initMaterials } from './material/registerMaterials';
+initMaterials(app)
+
 app.use(createPinia())
 app.use(router)
 

src/components/MyButton/index.vue → src/material/MyButton/index.vue

@@ -1,15 +1,24 @@
 <script setup>
 import { Button } from 'ant-design-vue';
+import { defineOptions } from 'vue';
+defineOptions({
+    name: 'MyButton',
+})
 const props = defineProps({
     schema: {
         type: Object,
-        default: () => {}
+        default: () => {
+            return {}
+        }
     },
     children: {
         type: Array,
-        default: () => []
+        default: () => {
+            return []
+        }
     }
 })
+
 </script>
 
 <template>

src/components/MyDiv/index.vue → src/material/MyDiv/index.vue

@@ -1,5 +1,10 @@
 <script setup>
 import Render from '../Render.vue';
+import { ref } from 'vue';
+import { defineOptions } from 'vue';
+defineOptions({
+    name: 'MyDiv',
+})
 const props = defineProps({
     schema: {
         type: Object,
@@ -10,11 +15,7 @@ const props = defineProps({
         default: () => []
     }
 })
-import { onMounted, ref } from 'vue';
 const myRef = ref('')
-onMounted(() =>{
-    props.schema.setClientRect( myRef.value.getBoundingClientRect())
-})
 </script>
 
 <template>

src/components/MyFlex/index.vue → src/material/MyFlex/index.vue

@@ -1,20 +1,25 @@
 <script setup>
 import Render from '../Render.vue';
+import { ref } from 'vue';
+import { defineOptions } from 'vue';
+defineOptions({
+    name: 'MyFlex',
+})
 const props = defineProps({
     schema: {
         type: Object,
-        default: () => {}
+        default: () => {
+            return {}
+        }
     },
     children: {
         type: Array,
-        default: () => []
+        default: () => {
+            return []
+        }
     }
 })
-import { onMounted, ref } from 'vue';
 const myRef = ref('')
-onMounted(() =>{
-    props.schema.setClientRect( myRef.value.getBoundingClientRect())
-})
 </script>
 
 <template>

src/components/MyText/index.vue → src/material/MyText/index.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { currentSchema } from '@/stores/globalData.js'
+import { defineOptions } from 'vue';
+defineOptions({
+    name: 'MyText',
+})
 import { _state, _stateKeys } from '@/stores/index.js'
+
 const props = defineProps({
     schema: {
         type: Object,

src/components/Render.vue → src/material/Render.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { inject } from 'vue';
 
 const props = defineProps({
     schema: {
@@ -11,11 +10,11 @@ const props = defineProps({
 
 <template>
     <template v-if="schema.display === 'inline-block'">
-        <component :is="schema.component" :children="schema.children || []" :schema="schema">
+        <component :is="schema.componentName" :children="schema.children || []" :schema="schema">
         </component>
     </template>
     <template v-else class="c_wrap">
-        <component :is="schema.component" :children="schema.children || []" :schema="schema">
+        <component :is="schema.componentName" :children="schema.children || []" :schema="schema">
             <Empty v-if="!schema.children || schema.children.length === 0" />
         </component>
     </template>

src/material/registerMaterials.js

@@ -0,0 +1,14 @@
+
+const componentNameRegex = /\/material\/([^/]+)\//
+/**
+ * 遍历material文件夹中的index.vue,注册为全局组件
+ * @param {Vue实例} app ue实例
+ */
+export function initMaterials(app){
+    const modules = import.meta.glob('@/material/**/index.vue',{ eager: true });
+    for (const path in modules) {
+        const module = modules[path].default
+        const componentName = module.name ? module.name : path.match(componentNameRegex)
+        app.component(componentName, module);
+    }
+}

src/stores/globalData.js

@@ -3,7 +3,7 @@ import { nanoid } from 'nanoid'
 
 // 引入物料
 const materialMap = new Map()
-const modules = import.meta.glob('@/components/**/index.ts',{ eager: true });
+const modules = import.meta.glob('@/material/**/index.ts',{ eager: true });
 for (const path in modules) {
     const module = modules[path].default
     if(!materialMap.has(module.group)){

src/utils/material.js

@@ -1,12 +1,11 @@
 // 物料
 import { nanoid } from 'nanoid'
-import component from './component'
 export default class Material{
     constructor(type){
         this.id = nanoid(10)
         this.label = '组件描述' + nanoid(5)
         this.display =  type === 'Text' ||  type === 'Button'? 'inline-block' : 'block'
-        this.component = component.get(type),
+        this.componentName = type,
         this.type = type
         this.rect = null,
         this.children = [],

src/views/layoutContent/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import TheDrapLocation from './components/TheDrapLocation.vue';
-import Render from '@/components/Render.vue';
+import Render from '@/material/Render.vue';
 import { debounce } from 'lodash-es'
 import { onMounted, provide, ref } from 'vue'
 import Material from '@/utils/material'