HolyKnightIX il y a 9 mois
Parent
révision
33f6218d30
2 fichiers modifiés avec 31 ajouts et 22 suppressions
  1. +21
    -2
      src/components/panel/page.vue
  2. +10
    -20
      src/components/viewport/index.vue

+ 21
- 2
src/components/panel/page.vue Voir le fichier

@@ -32,8 +32,13 @@
<el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input"
@input="shapeChanged('pageHeight')"></el-input-number>
<span class="unit-text">(mm)</span>
<span class="unit-text">(mm)</span>
</el-form-item>
</el-row>
<el-row>
<el-button size="mini" type="primary" @click="selectPage(1)">A4纸张预设</el-button>
<el-button size="mini" type="primary" @click="selectPage(2)">标准收据预设</el-button>
</el-row>
</el-form>
</div>
</template>
@@ -50,9 +55,23 @@ export default {
// 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位
shapeChanged(element) {
if (element === "pageWidth") {
this.pageInfo.width = this.pageInfo.pageWidth * 2
this.pageInfo.width = this.pageInfo.pageWidth * 2.5
} else if (element === "pageHeight") {
this.pageInfo.height = this.pageInfo.pageHeight * 2
this.pageInfo.height = this.pageInfo.pageHeight * 2.5
}
},

selectPage(num) {
if (num == 1) {
this.pageInfo.pageWidth = 210
this.pageInfo.pageHeight = 297
this.shapeChanged("pageWidth")
this.shapeChanged("pageHeight")
} else if (num == 2) {
this.pageInfo.pageWidth = 210
this.pageInfo.pageHeight = 105
this.shapeChanged("pageWidth")
this.shapeChanged("pageHeight")
}
}
}


+ 10
- 20
src/components/viewport/index.vue Voir le fichier

@@ -1,25 +1,14 @@
<template>
<div id="viewport" data-type="viewport" class="holder">
<div
:style="{
height: page.height + 'px',
width: page.width + 'px',
backgroundImage: 'url('+backImg+')'
}"
class="screen"
>
<div :style="{
height: page.height + 'px',
width: page.width + 'px',
backgroundImage: 'url(' + backImg + ')'
}" class="screen">
<!-- 组件 -->
<component
v-for="val in widgetStore"
:is="val.type"
:data-title="val.type"
:class="{'active': widgetId === val.uuid}"
:key="val.uuid"
:val="val"
:data-type="val.type"
:data-uuid="val.uuid"
class="layer"
></component>
<component v-for="val in widgetStore" :is="val.type" :data-title="val.type"
:class="{ 'active': widgetId === val.uuid }" :key="val.uuid" :val="val" :data-type="val.type" :data-uuid="val.uuid"
class="layer"></component>

<!-- 参考线 -->
<!-- <ref /> -->
@@ -153,7 +142,7 @@ export default {
.holder {
display: flex;
justify-content: center;
overflow: auto;
overflow: scroll;
font-size: 0;
border: 1px solid #f5f5f5;
border-width: 0 1px;
@@ -162,6 +151,7 @@ export default {
background-position: 0 0, 13px 13px;
background-size: 26px 26px;
}

.screen {
margin: 25px auto;
transform-origin: center top;


Chargement…
Annuler
Enregistrer