|
|
|
@ -1,19 +1,32 @@ |
|
|
|
<template> |
|
|
|
<component |
|
|
|
class="component" |
|
|
|
:is="detail.name" |
|
|
|
v-if="detail.type == 'component'" |
|
|
|
v-bind="detail.props" |
|
|
|
v-on="detail.methods" |
|
|
|
> |
|
|
|
<template v-for="(child, childIndex) in detail.slot"> |
|
|
|
<template v-if="child.type == 'text'"> {{ child.text }}</template> |
|
|
|
<customComponent v-if="child.type == 'component'" :detail="child" :key="childIndex" /> |
|
|
|
class="component" |
|
|
|
:is="detail.name" |
|
|
|
v-if="detail.type == 'component'" |
|
|
|
v-bind="detail.props" |
|
|
|
v-on="methods" |
|
|
|
:style="[$computeStyle(detail.style, true)]" |
|
|
|
> |
|
|
|
<template v-for="(child, childIndex) in detail.child"> |
|
|
|
<template v-if="child.type == 'text'"> {{ child.text }}</template> |
|
|
|
<customComponent |
|
|
|
v-if="child.type == 'component'" |
|
|
|
:detail="child" |
|
|
|
:key="childIndex" |
|
|
|
/> |
|
|
|
<template v-if="child.type == 'slot'"> |
|
|
|
<template v-for="(slot, slotIndex) in detail.slots" :slot="slot.name || 'default'"> |
|
|
|
{{slotIndex}} |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</component> |
|
|
|
</template> |
|
|
|
</component> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import componentList from "@/data/component-list"; |
|
|
|
import {cloneDeep} from "lodash"; |
|
|
|
export default { |
|
|
|
inject: ["active"], |
|
|
|
name: "customComponent", |
|
|
|
props: { |
|
|
|
detail: { |
|
|
|
@ -21,6 +34,42 @@ export default { |
|
|
|
default: () => {}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
methods(){ |
|
|
|
return Object.assign(this.detail.methods||{},this.detail.dragevent?{ |
|
|
|
drop: this.drop, |
|
|
|
dragover: this.dragover, |
|
|
|
click: this.click, |
|
|
|
}:{}) |
|
|
|
} |
|
|
|
},methods:{ |
|
|
|
click(){ |
|
|
|
|
|
|
|
}, |
|
|
|
drop(ev){ |
|
|
|
console.log(ev); |
|
|
|
ev.stopPropagation() |
|
|
|
ev.preventDefault() |
|
|
|
try { |
|
|
|
var { id, x, y } = JSON.parse( |
|
|
|
decodeURIComponent(ev.dataTransfer.getData("component-transfer")) |
|
|
|
); |
|
|
|
let offsetX = ev.offsetX - x; |
|
|
|
let offsetY = ev.offsetY - y; |
|
|
|
let el = cloneDeep(componentList.filter((v) => v.id === id)[0]); |
|
|
|
el.style.left = offsetX; |
|
|
|
el.style.top = offsetY; |
|
|
|
this.detail.child.push(el); |
|
|
|
} catch (error) { |
|
|
|
console.warn(error); |
|
|
|
} |
|
|
|
}, |
|
|
|
dragover(ev){ |
|
|
|
console.log(ev); |
|
|
|
ev.stopPropagation() |
|
|
|
ev.preventDefault() |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
npmrun
4 years ago