提交 f8693b52 authored 作者: wangjiahao's avatar wangjiahao

refactor: 优化滚动条问题

上级 a7fb283c
...@@ -595,7 +595,7 @@ export default { ...@@ -595,7 +595,7 @@ export default {
this.maxH = val this.maxH = val
}, },
w(val) { w(val) {
console.log('changeWidthCK:' + this.resizing) // console.log('changeWidthCK:' + this.resizing)
if (this.resizing || this.dragging) { if (this.resizing || this.dragging) {
return return
...@@ -603,7 +603,7 @@ export default { ...@@ -603,7 +603,7 @@ export default {
if (this.parent) { if (this.parent) {
this.bounds = this.calcResizeLimits() this.bounds = this.calcResizeLimits()
} }
console.log('changeWidth:' + val) // console.log('changeWidth:' + val)
this.changeWidth(val) this.changeWidth(val)
}, },
h(val) { h(val) {
...@@ -1192,7 +1192,7 @@ export default { ...@@ -1192,7 +1192,7 @@ export default {
this.right = right this.right = right
this.bottom = bottom this.bottom = bottom
this.width = width this.width = width
console.log('width3:' + this.width) // console.log('width3:' + this.width)
this.height = height this.height = height
}, },
changeHeight(val) { changeHeight(val) {
......
<template> <template>
<div class="grid"> <div class="grid">
<!-- positionBox:{{ positionBox.length }}--> <!-- positionBox:{{ positionBox.length }}-->
<!-- <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
<div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%"> <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
<div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc "> <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ">
{{ xItem.el?1:0 }} {{ xItem.el?1:0 }}
......
<template> <template>
<div <div
id="editor" id="editor"
ref="container"
class="editor" class="editor"
:class="[ :class="[
{ {
...@@ -9,15 +8,14 @@ ...@@ -9,15 +8,14 @@
['parent_transform']:!chartDetailsVisible ['parent_transform']:!chartDetailsVisible
} }
]" ]"
:style="customStyle"
@dragover="handleDragOver" @dragover="handleDragOver"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@scroll="canvasScroll" @scroll="canvasScroll"
> >
<!-- 网格线 --> <!-- 网格线 -->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />--> <!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
<!-- positionBox:{{positionBoxInfo}}--> <!-- positionBox:{{positionBoxInfo}}-->
<!-- <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />--> <!-- <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
<!-- 仪表板联动清除按钮--> <!-- 仪表板联动清除按钮-->
<canvas-opt-bar /> <canvas-opt-bar />
...@@ -223,9 +221,11 @@ function debounce(func, time) { ...@@ -223,9 +221,11 @@ function debounce(func, time) {
function scrollScreen(e) { function scrollScreen(e) {
if (e.clientY + 50 >= window.innerHeight) { if (e.clientY + 50 >= window.innerHeight) {
console.log('scrollScreen+')
const body = $(document.body) const body = $(document.body)
body.scrollTop(body.scrollTop() + 20) body.scrollTop(body.scrollTop() + 20)
} else if (e.clientY <= 150) { } else if (e.clientY <= 150) {
console.log('scrollScreen-')
const body = $(document.body) const body = $(document.body)
body.scrollTop(body.scrollTop() - 20) body.scrollTop(body.scrollTop() - 20)
} }
...@@ -238,7 +238,7 @@ function scrollScreen(e) { ...@@ -238,7 +238,7 @@ function scrollScreen(e) {
function resetPositionBox() { function resetPositionBox() {
// 根据当前容器的宽度来决定多少列 // 根据当前容器的宽度来决定多少列
itemMaxX = this.maxCell itemMaxX = this.maxCell
const rows = 20 // 初始100行,后面根据需求会自动增加 const rows = this.matrixCount.y // 初始100行,后面根据需求会自动增加
for (let i = 0; i < rows; i++) { for (let i = 0; i < rows; i++) {
const row = [] const row = []
...@@ -274,7 +274,7 @@ function addItemToPositionBox(item) { ...@@ -274,7 +274,7 @@ function addItemToPositionBox(item) {
function fillPositionBox(maxY) { function fillPositionBox(maxY) {
const pb = positionBox const pb = positionBox
maxY += 2 maxY += 1
for (let j = 0; j < maxY; j++) { for (let j = 0; j < maxY; j++) {
if (pb[j] === undefined) { if (pb[j] === undefined) {
const row = [] const row = []
...@@ -288,8 +288,8 @@ function fillPositionBox(maxY) { ...@@ -288,8 +288,8 @@ function fillPositionBox(maxY) {
} }
itemMaxY = maxY itemMaxY = maxY
console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
$(this.$el).css('height', ((itemMaxY + 2) * this.cellHeight) + 'px') // $(this.$el).css('height', ((itemMaxY) * this.cellHeight) + 'px')
} }
function removeItemFromPositionBox(item) { function removeItemFromPositionBox(item) {
...@@ -312,10 +312,10 @@ function removeItemFromPositionBox(item) { ...@@ -312,10 +312,10 @@ function removeItemFromPositionBox(item) {
function recalcCellWidth() { function recalcCellWidth() {
// const containerNode = this.$refs['container'] // const containerNode = this.$refs['container']
// this.outStyle.width && this.outStyle.height // this.outStyle.width && this.outStyle.height
const containerWidth = this.outStyle.width // const containerWidth = this.outStyle.width
const cells = Math.round(containerWidth / this.cellWidth) // const cells = Math.round(containerWidth / this.cellWidth)
this.maxCell = cells this.maxCell = this.matrixCount.x
// if (containerWidth % this.cellWidth !=== 0) { // if (containerWidth % this.cellWidth !=== 0) {
// this.cellWidth += containerWidth % this.cellWidth / cells; // this.cellWidth += containerWidth % this.cellWidth / cells;
...@@ -1181,39 +1181,6 @@ export default { ...@@ -1181,39 +1181,6 @@ export default {
return result return result
}, },
handleContextMenu(e) {
e.stopPropagation()
e.preventDefault()
let target = e.target
while (target instanceof SVGElement) {
target = target.parentNode
}
let top = 0
let left = 0
// 如果档期有计划的组件 坐标取当前组件的加上偏移量
if (this.curComponent && !target.className.includes('editor')) {
if (this.canvasStyleData.selfAdaption) {
top = this.curComponent.style.top * this.scaleHeight / 100 + e.offsetY
left = this.curComponent.style.left * this.scaleWidth / 100 + e.offsetX
} else {
top = this.curComponent.style.top + e.offsetY
left = this.curComponent.style.left + e.offsetX
}
} else {
// 计算菜单相对于编辑器的位移
top = e.offsetY
left = e.offsetX
while (!target.className.includes('editor')) {
left += target.offsetLeft
top += target.offsetTop
target = target.parentNode
}
}
this.$store.commit('showContextMenu', { top, left })
},
getShapeStyle(style) { getShapeStyle(style) {
const result = {}; const result = {};
['width', 'left'].forEach(attr => { ['width', 'left'].forEach(attr => {
...@@ -1612,9 +1579,9 @@ export default { ...@@ -1612,9 +1579,9 @@ export default {
debounce((function(newX, oldX, newY, oldY) { debounce((function(newX, oldX, newY, oldY) {
return function() { return function() {
console.log('move1') // console.log('move1')
if (newX !== oldX || oldY !== newY) { if (newX !== oldX || oldY !== newY) {
console.log('move2') // console.log('move2')
movePlayer.call(vm, moveItem, { movePlayer.call(vm, moveItem, {
x: newX, x: newX,
y: newY y: newY
...@@ -1674,7 +1641,7 @@ export default { ...@@ -1674,7 +1641,7 @@ export default {
* @returns * @returns
*/ */
getMaxCell() { getMaxCell() {
console.log('getMaxCell:') // console.log('getMaxCell:')
return this.maxCell return this.maxCell
}, },
...@@ -1684,7 +1651,7 @@ export default { ...@@ -1684,7 +1651,7 @@ export default {
* @returns * @returns
*/ */
getRenderState() { getRenderState() {
console.log('getRenderState:') // console.log('getRenderState:')
return this.moveAnimate return this.moveAnimate
}, },
...@@ -1708,7 +1675,7 @@ export default { ...@@ -1708,7 +1675,7 @@ export default {
startMoveIn() { startMoveIn() {
const moveInItemInfo = this.$store.state.dragComponentInfo const moveInItemInfo = this.$store.state.dragComponentInfo
this.addItemBox(moveInItemInfo) this.addItemBox(moveInItemInfo)
console.log('startMoveIn:') // console.log('startMoveIn:')
const vm = this const vm = this
// e.preventDefault(); // e.preventDefault();
if (!this.infoBox) { if (!this.infoBox) {
......
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
<div <div
id="canvasInfo" id="canvasInfo"
class="this_canvas" class="this_canvas"
:style="customCanvasStyle"
@drop="handleDrop" @drop="handleDrop"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="deselectCurComponent" @mouseup="deselectCurComponent"
...@@ -280,6 +281,26 @@ export default { ...@@ -280,6 +281,26 @@ export default {
}, },
computed: { computed: {
customCanvasStyle() {
let style = {}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = {
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
...style
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color,
...style
}
}
}
// console.log('customStyle=>' + JSON.stringify(style) + JSON.stringify(this.canvasStyleData))
return style
},
panelInfo() { panelInfo() {
return this.$store.state.panel.panelInfo return this.$store.state.panel.panelInfo
}, },
...@@ -826,6 +847,8 @@ export default { ...@@ -826,6 +847,8 @@ export default {
height: calc(100vh - 91px); height: calc(100vh - 91px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-size:100% 100% !important;
} }
.el-main{ .el-main{
height: calc(100vh - 91px); height: calc(100vh - 91px);
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论