Skip to content

Commit

Permalink
修复渲染错误的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@duolabmeng6
duolabmeng6 committed Oct 25, 2023
1 parent 836ac78 commit d7f85d4
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 88 deletions.
16 changes: 16 additions & 0 deletions GoEasyDesigner/frontend/public/自定义组件/流光边框/流光边框.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

export default {
top: "150",
left: "440",
width: "240",
height: "80",
禁止放置: true,
可视: true,
禁止: false,
层级: 0,
fontSize: "24px",
data:{
background: '#000000',
},
html:""
}
15 changes: 15 additions & 0 deletions GoEasyDesigner/frontend/public/自定义组件/登录框/登录框.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default {
top: "150",
left: "440",
width: "300",
height: "300",
禁止放置: true,
可视: true,
禁止: false,
层级: 0,
data: {
username: 'admin',
password: 'admin',
},
HTML: ""
}
37 changes: 23 additions & 14 deletions GoEasyDesigner/frontend/src/app9.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,25 +257,18 @@ onMounted(() => {
})
function 拖拽开始_自定义组件(event, item) {
async function 拖拽开始_自定义组件(event, item) {
let 组件名称 = item.组件名称
let 组件路径 = item.组件路径
//读取 组件路径 如 ./自定义组件/流光边框/流光边框.vue的内容
fetch(组件路径)
.then(response => response.text())
.then(data => {
console.log("自定义组件数据",data);
创建自定义组件json(组件名称, data)
})
function 创建自定义组件json(组件名称,组件html){
let 新属性 = JSON.parse(JSON.stringify(创建组件属性默认值['自定义组件']))
let 组件默认属性 = item.组件默认属性
function 创建自定义组件json(组件名称, 组件html, 新属性) {
// 新属性 = JSON.parse(JSON.stringify(创建组件属性默认值['自定义组件']))
let k = store.获取索引(组件名称)
新属性.id = store.获取随机id()
//避免名称重复导致后续代码出问题
for (let i = 0; i < 100; i++) {
let 名称是否存在 = store.递归查找名称(store.list, 组件名称 + k)
console.log("名称是否存在", 名称是否存在)
// console.log("名称是否存在", 名称是否存在)
if (名称是否存在) {
k = store.获取索引(组件名称)
} else {
Expand All @@ -287,9 +280,25 @@ function 拖拽开始_自定义组件(event, item) {
新属性.标题 = 组件名称 + k
新属性.HTML = 组件html
store.当前拖拽组件数据 = 新属性
// console.log("自定义组件创建=============", JSON.stringify(新属性))
}
const responseDefaultAttributes = await fetch(组件默认属性);
const dataDefaultAttributes = await responseDefaultAttributes.text();
const blob = new Blob([dataDefaultAttributes], {type: 'application/javascript'});
const url = URL.createObjectURL(blob);
const module = await import(url);
const 新属性 = module.default;
// console.log("自定义组件默认属性", 新属性);
const responseHtml = await fetch(组件路径);
const 组件html = await responseHtml.text();
// console.log("自定义组件的html", 组件html);
创建自定义组件json(组件名称, 组件html, 新属性);
}
function 拖拽开始(event, 组件名称) {
Expand Down Expand Up @@ -318,7 +327,7 @@ function 拖拽开始(event, 组件名称) {
//避免名称重复导致后续代码出问题
for (let i = 0; i < 100; i++) {
let 名称是否存在 = store.递归查找名称(store.list, 组件名称 + k)
console.log("名称是否存在", 名称是否存在)
// console.log("名称是否存在", 名称是否存在)
if (名称是否存在) {
k = store.获取索引(组件名称)
} else {
Expand Down
10 changes: 5 additions & 5 deletions GoEasyDesigner/frontend/src/components/渲染设计组件.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@
<template v-else-if="item.组件名称=='弹性布局'">
<component is="弹性布局" :item="item"/>
</template>
<template v-else-if="item.组件名称=='自定义组件'">
<component is="自定义组件" :item="item"/>

</template>
<template v-else>
<component :is="item.组件名称" :item="item"/>
<component is="渲染组件" v-for="(subItem, subIndex) in item.子组件" :key="subIndex" :item="subItem"/>
Expand Down Expand Up @@ -200,7 +204,6 @@ async function 拖拽放下(event, v) {
return;
}
// 获取当前鼠标相对于当前元素的相对位置
let x = event.offsetX;
let y = event.offsetY;
Expand Down Expand Up @@ -241,12 +244,9 @@ async function 拖拽放下(event, v) {
store.历史记录管理器实例.记录(JSON.stringify(store.list))
// console.log(JSON.stringify(store.list, null, 2))
store.取组件列表()
store.当前组件索引 = store.当前拖拽组件数据.id
await nextTick()
}
Expand All @@ -259,7 +259,7 @@ function 递归添加(源数据, 插入数据, 放置的容器名称) {
if (item.id == 放置的容器名称) {
// console.log("找到了", item.子组件)
// 递归添加(item.子组件, 插入数据, "abc")
item.子组件 = [插入数据, ...item.子组件]
item.子组件 = [...item.子组件,插入数据 ]
} else {
递归添加(item.子组件, 插入数据, 放置的容器名称)
Expand Down
83 changes: 17 additions & 66 deletions GoEasyDesigner/frontend/src/components/组件/自定义组件.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,77 +3,33 @@
</template>

<script setup>
import {ref,nextTick} from 'vue';
import {loadModule} from 'vue3-sfc-loader/dist/vue3-sfc-loader.js';
import {onMounted, ref, watch} from 'vue';
const remote = ref(null);
const {item} = defineProps(['item']);
const emits = defineEmits(["CustomEvent"]);
let currentComponent = null;
onMounted(() => {
loadComponent();
});
// Watch for changes in item.HTML
watch(() => item.HTML, () => {
unloadComponent();
loadComponent();
});
async function unloadComponent() {
if (currentComponent) {
currentComponent = null;
}
}
loadComponent();
async function loadComponent() {
const sfcContent = item.HTML
//从 item.HTML 提取 <style scoped></style> 的内容 如果不存在就给一个空的
const style = sfcContent.match(/<style scoped>([\s\S]*)<\/style>/)?.[1] || "";
const tailwindCSS = `
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Add additional Tailwind CSS customization here */
` + style;
console.log("tailwindCSS", tailwindCSS)
const style = item.HTML.match(/<style scoped>([\s\S]*)<\/style>/)?.[1] || "";
const 自定义css = style;
const Vue = await import('vue');
// const options = {
//
// moduleCache: {
// vue: Vue,
// },
// getFile(url) {
// if (url === '/myPugComponent.vue') {
// console.log("url", url)
// if (url.endsWith('.css')) {
// // Return the Tailwind CSS content
// return Promise.resolve(tailwindCSS);
// } else {
// // Return the Vue component content
// return Promise.resolve(sfcContent);
// }
// }
// },
// addStyle: () => {
// },
// };
const config = {
files: {
'/style.css': tailwindCSS,
'/myPugComponent.vue': sfcContent
}
};
let ComponentName = "/" + item.名称 + "Component.vue";
const options = {
moduleCache: { vue: Vue },
getFile: url => config.files[url],
moduleCache: {vue: Vue},
async getFile(url) {
if (url === ComponentName) {
return Promise.resolve(item.HTML);
}
if (url === '/style.css') {
return Promise.resolve(自定义css);
}
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const style = Object.assign(document.createElement('style'), {textContent});
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
Expand All @@ -85,15 +41,10 @@ async function loadComponent() {
}
},
}
const loadedModule = await loadModule('/myPugComponent.vue', options);
// Assuming the loaded module contains a default export that is a Vue component
// You might need to adjust this based on your component structure
remote.value = loadedModule.default || loadedModule;
currentComponent = remote.value;
remote.value = await loadModule(ComponentName, options);
}
function onCustomEvent(name, data) {
console.log("收到自定义事件", "事件名称", name, "数据", data);
emits("CustomEvent", name, item.data);
Expand Down
2 changes: 2 additions & 0 deletions GoEasyDesigner/frontend/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,12 @@ let 自定义组件名称列表 = []
自定义组件名称列表.push({
组件名称 : "流光边框",
组件路径 : "./自定义组件/流光边框/流光边框.vue",
组件默认属性 : "./自定义组件/流光边框/流光边框.js",
})
自定义组件名称列表.push({
组件名称 : "登录框",
组件路径 : "./自定义组件/登录框/登录框.vue",
组件默认属性 : "./自定义组件/登录框/登录框.js",
})
console.log("自定义组件名称列表",自定义组件名称列表)
app.config.globalProperties.自定义组件名称列表 = 自定义组件名称列表
Expand Down
6 changes: 3 additions & 3 deletions GoEasyDesigner/frontend/src/stores/counter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,21 +177,21 @@ export const useCounterStore = defineStore('counter', {
},

当前组件名称2() {
console.log("this.当前拖拽组件数据.组件名称", this.当前拖拽组件数据.组件名称)
// console.log("this.当前拖拽组件数据.组件名称", this.当前拖拽组件数据.组件名称)
if (this.当前拖拽组件数据.组件名称 == "窗口") {
return "窗口属性"
}
return this.当前拖拽组件数据.组件名称 + "属性"
},

获取索引(名称) {
console.log(this.indexMap[名称])
// console.log(this.indexMap[名称])
if (this.indexMap[名称] === undefined) {
this.indexMap[名称] = 1;
} else {
this.indexMap[名称]++;
}
console.log("获取索引", 名称, this.indexMap[名称], this.indexMap)
// console.log("获取索引", 名称, this.indexMap[名称], this.indexMap)
return this.indexMap[名称];
},
获取随机id() {
Expand Down

0 comments on commit d7f85d4

Please sign in to comment.