refactor:优化图片拖拽进仪表版的展示方式,设置为固定高宽

This commit is contained in:
wangjiahao 2021-09-22 17:34:36 +08:00
parent 1b2115273d
commit 5e1a37794e
3 changed files with 17 additions and 11 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="filter-container" @dragstart="handleDragStart"> <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
<div class="widget-subject"> <div class="widget-subject">
<div class="filter-header"> <div class="filter-header">
@ -134,6 +134,9 @@ export default {
} }
}) })
return component return component
},
handleDragEnd(ev) {
this.$store.commit('clearDragComponentInfo')
} }
} }
} }

View File

@ -275,7 +275,8 @@ export default {
adviceGroupId: null, adviceGroupId: null,
scrollLeft: 0, scrollLeft: 0,
scrollTop: 0, scrollTop: 0,
timeMachine: null timeMachine: null,
dropComponentInfo: null
} }
}, },
@ -440,6 +441,8 @@ export default {
return data return data
}, },
handleDrop(e) { handleDrop(e) {
//
this.dropComponentInfo = deepCopy(this.dragComponentInfo)
this.currentDropElement = e this.currentDropElement = e
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -491,10 +494,10 @@ export default {
// position = absolution // position = absolution
// component.style.top = this.getPositionY(e.layerY) // component.style.top = this.getPositionY(e.layerY)
// component.style.left = this.getPositionX(e.layerX) // component.style.left = this.getPositionX(e.layerX)
component.style.top = this.dragComponentInfo.shadowStyle.y component.style.top = this.dropComponentInfo.shadowStyle.y
component.style.left = this.dragComponentInfo.shadowStyle.x component.style.left = this.dropComponentInfo.shadowStyle.x
component.style.width = this.dragComponentInfo.shadowStyle.width component.style.width = this.dropComponentInfo.shadowStyle.width
component.style.height = this.dragComponentInfo.shadowStyle.height component.style.height = this.dropComponentInfo.shadowStyle.height
component.id = newComponentId component.id = newComponentId
this.$store.commit('addComponent', { component }) this.$store.commit('addComponent', { component })
@ -594,6 +597,7 @@ export default {
this.$refs.files.click() this.$refs.files.click()
}, },
handleFileChange(e) { handleFileChange(e) {
const _this = this
const file = e.target.files[0] const file = e.target.files[0]
if (!file.type.includes('image')) { if (!file.type.includes('image')) {
toast('只能插入图片') toast('只能插入图片')
@ -618,10 +622,10 @@ export default {
propValue: fileResult, propValue: fileResult,
style: { style: {
...commonStyle, ...commonStyle,
top: this.dragComponentInfo.shadowStyle.y, top: _this.dropComponentInfo.shadowStyle.y,
left: this.dragComponentInfo.shadowStyle.x, left: _this.dropComponentInfo.shadowStyle.x,
width: this.dragComponentInfo.shadowStyle.width, width: _this.dropComponentInfo.shadowStyle.width,
height: this.dragComponentInfo.shadowStyle.height height: _this.dropComponentInfo.shadowStyle.height
} }
} }
}) })

View File

@ -91,7 +91,6 @@ export default {
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans)) ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
}, },
handleDragEnd(ev) { handleDragEnd(ev) {
console.log('handleDragEnd==>')
this.$store.commit('clearDragComponentInfo') this.$store.commit('clearDragComponentInfo')
} }
} }