forked from github/dataease
refactor:优化图片拖拽进仪表版的展示方式,设置为固定高宽
This commit is contained in:
parent
1b2115273d
commit
5e1a37794e
@ -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')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -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')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user