refactor: 画布按钮位置调整

This commit is contained in:
wangjiahao 2021-10-10 23:44:10 +08:00
parent e5d5afda0e
commit 158b3a1e29
3 changed files with 47 additions and 34 deletions

View File

@ -1007,7 +1007,7 @@ export default {
handler(newVal, oldVla) {
// console.log('newVal:' + JSON.stringify(newVal) + ';oldVla:' + JSON.stringify(oldVla))
// componentData matrix
if (this.lastComponentDataLength === 0 && newVal.length > 0) {
if (newVal.length !== this.lastComponentDataLength) {
this.lastComponentDataLength = newVal.length
this.initMatrix()
}
@ -1676,23 +1676,25 @@ export default {
})
},
startMoveIn() {
const moveInItemInfo = this.$store.state.dragComponentInfo
this.addItemBox(moveInItemInfo)
// console.log('startMoveIn:')
const vm = this
// e.preventDefault();
if (!this.infoBox) {
this.infoBox = {}
if (this.canvasStyleData.auxiliaryMatrix) {
const moveInItemInfo = this.$store.state.dragComponentInfo
this.addItemBox(moveInItemInfo)
console.log('startMoveIn:')
const vm = this
// e.preventDefault();
if (!this.infoBox) {
this.infoBox = {}
}
const infoBox = this.infoBox
infoBox.moveItem = moveInItemInfo
infoBox.moveItemIndex = this.yourList.length - 1
infoBox.oldX = 1 // X
infoBox.oldY = 1
infoBox.oldSizeX = moveInItemInfo.sizex
infoBox.oldSizeY = moveInItemInfo.sizey
}
const infoBox = this.infoBox
infoBox.moveItem = moveInItemInfo
infoBox.moveItemIndex = this.yourList.length - 1
infoBox.oldX = 1 // X
infoBox.oldY = 1
infoBox.oldSizeX = moveInItemInfo.sizex
infoBox.oldSizeY = moveInItemInfo.sizey
}
}
}

View File

@ -13,10 +13,21 @@
</div>
<div v-else class="toolbar">
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />-->
<!-- <span>{{ $t('panel.matrix_design') }}</span>-->
<!-- </div>-->
<!-- <el-tooltip :content="$t('panel.new_element_distribution')">-->
<!-- <el-switch-->
<!-- v-model="canvasStyleData.auxiliaryMatrix"-->
<!-- :width="35"-->
<!-- active-color="#13ce66"-->
<!-- inactive-color="#ff4949"-->
<!-- :active-text="$t('panel.matrix')"-->
<!-- :inactive-text="$t('panel.suspension')"-->
<!-- />-->
<!-- </el-tooltip>-->
<div class="canvas-config" style="margin-right: 10px">
<el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
<span>{{ $t('panel.matrix_design') }}</span>
</div>
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
<!-- <input v-model="scale" @input="handleScaleChange"> %-->
@ -371,7 +382,7 @@ export default {
float: right;
height: 35px;
line-height: 35px;
min-width: 400px;
min-width: 500px;
/*background: #fff;*/
/*border-bottom: 1px solid #ddd;*/

View File

@ -9,18 +9,18 @@
<div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item :title="$t('panel.panel')" name="panel">
<el-row class="shape-item">
<span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>
<!-- <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />-->
<el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">
<el-radio-button :label="true">
{{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />
</el-radio-button>
<el-radio-button :label="false">
{{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />
</el-radio-button>
</el-radio-group>
</el-row>
<!-- <el-row class="shape-item">-->
<!-- <span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>-->
<!-- &lt;!&ndash; <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />&ndash;&gt;-->
<!-- <el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">-->
<!-- <el-radio-button :label="true">-->
<!-- {{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />-->
<!-- </el-radio-button>-->
<!-- <el-radio-button :label="false">-->
<!-- {{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />-->
<!-- </el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-row>-->
<el-row style="background-color: #f7f8fa; margin: 5px">
<background-selector class="attr-selector" />
<component-gap class="attr-selector" />