提交 ce4d20b8 authored 作者: junjie's avatar junjie

fix:代码规范

上级 09aaaede
<template> <template>
<div class="group"> <div class="group">
<div> <div>
<template v-for="item in propValue"> <template v-for="item in propValue">
<component <component
class="component" :is="item.component"
:is="item.component" :id="'component' + item.id"
:style="item.groupStyle" :key="item.id"
:propValue="item.propValue" class="component"
:key="item.id" :style="item.groupStyle"
:id="'component' + item.id" :prop-value="item.propValue"
:element="item" :element="item"
/> />
</template> </template>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getStyle } from '@/components/canvas/utils/style' import { getStyle } from '@/components/canvas/utils/style'
export default { export default {
props: { props: {
propValue: { propValue: {
type: Array, type: Array,
default: () => [], default: () => []
},
element: {
type: Object,
},
},
created() {
const parentStyle = this.element.style
this.propValue.forEach(component => {
// component.groupStyle 的 top left 是相对于 group 组件的位置
// 如果已存在 component.groupStyle,说明已经计算过一次了。不需要再次计算
if (!Object.keys(component.groupStyle).length) {
const style = { ...component.style }
component.groupStyle = getStyle(style)
component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)
component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)
component.groupStyle.width = this.toPercent(style.width / parentStyle.width)
component.groupStyle.height = this.toPercent(style.height / parentStyle.height)
}
})
},
methods: {
toPercent(val) {
return val * 100 + '%'
},
}, },
element: {
type: Object
}
},
created() {
const parentStyle = this.element.style
this.propValue.forEach(component => {
// component.groupStyle 的 top left 是相对于 group 组件的位置
// 如果已存在 component.groupStyle,说明已经计算过一次了。不需要再次计算
if (!Object.keys(component.groupStyle).length) {
const style = { ...component.style }
component.groupStyle = getStyle(style)
component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)
component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)
component.groupStyle.width = this.toPercent(style.width / parentStyle.width)
component.groupStyle.height = this.toPercent(style.height / parentStyle.height)
}
})
},
methods: {
toPercent(val) {
return val * 100 + '%'
}
}
} }
</script> </script>
......
...@@ -4,64 +4,64 @@ import generateID from '@/components/canvas/utils/generateID' ...@@ -4,64 +4,64 @@ import generateID from '@/components/canvas/utils/generateID'
import { deepCopy } from '@/components/canvas/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
state: { state: {
copyData: null, // 复制粘贴剪切 copyData: null, // 复制粘贴剪切
isCut: false, isCut: false
}, },
mutations: { mutations: {
copy(state) { copy(state) {
if (!state.curComponent) return if (!state.curComponent) return
state.copyData = { state.copyData = {
data: deepCopy(state.curComponent), data: deepCopy(state.curComponent),
index: state.curComponentIndex, index: state.curComponentIndex
} }
state.isCut = false state.isCut = false
}, },
paste(state, isMouse) { paste(state, isMouse) {
if (!state.copyData) { if (!state.copyData) {
toast('请选择组件') toast('请选择组件')
return return
} }
const data = state.copyData.data const data = state.copyData.data
if (isMouse) { if (isMouse) {
data.style.top = state.menuTop data.style.top = state.menuTop
data.style.left = state.menuLeft data.style.left = state.menuLeft
} else { } else {
data.style.top += 10 data.style.top += 10
data.style.left += 10 data.style.left += 10
} }
data.id = generateID() data.id = generateID()
store.commit('addComponent', { component: deepCopy(data) }) store.commit('addComponent', { component: deepCopy(data) })
if (state.isCut) { if (state.isCut) {
state.copyData = null state.copyData = null
} }
}, },
cut(state) { cut(state) {
if (!state.curComponent) { if (!state.curComponent) {
toast('请选择组件') toast('请选择组件')
return return
} }
if (state.copyData) { if (state.copyData) {
const data = deepCopy(state.copyData.data) const data = deepCopy(state.copyData.data)
const index = state.copyData.index const index = state.copyData.index
data.id = generateID() data.id = generateID()
store.commit('addComponent', { component: data, index }) store.commit('addComponent', { component: data, index })
if (state.curComponentIndex >= index) { if (state.curComponentIndex >= index) {
// 如果当前组件索引大于等于插入索引,需要加一,因为当前组件往后移了一位 // 如果当前组件索引大于等于插入索引,需要加一,因为当前组件往后移了一位
state.curComponentIndex++ state.curComponentIndex++
} }
} }
store.commit('copy') store.commit('copy')
store.commit('deleteComponent') store.commit('deleteComponent')
state.isCut = true state.isCut = true
}, }
}, }
} }
...@@ -178,7 +178,7 @@ import bus from '@/utils/bus' ...@@ -178,7 +178,7 @@ import bus from '@/utils/bus'
import EditPanel from './EditPanel' import EditPanel from './EditPanel'
import { addGroup, delGroup, groupTree, defaultTree, findOne } from '@/api/panel/panel' import { addGroup, delGroup, groupTree, defaultTree, findOne } from '@/api/panel/panel'
import { import {
DEFAULT_COMMON_CANVAS_STYLE_STRING DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel' } from '@/views/panel/panel'
export default { export default {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论