|
@ -10,18 +10,24 @@ |
|
|
<div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{ |
|
|
<div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{ |
|
|
width: boardWidth + 'px', |
|
|
width: boardWidth + 'px', |
|
|
height: boardHeight + 'px', |
|
|
height: boardHeight + 'px', |
|
|
|
|
|
position: 'relative', |
|
|
|
|
|
|
|
|
|
|
|
lineHeight:boardHeight + 'px', |
|
|
|
|
|
textAlign: getTextAlign(dataForm.formatStyle) |
|
|
|
|
|
|
|
|
}" class="blackBoard2"> |
|
|
}" class="blackBoard2"> |
|
|
<span :style="{ |
|
|
<span :style="{ |
|
|
color: getColorStyle(dataForm.COLOR), |
|
|
color: getColorStyle(dataForm.COLOR), |
|
|
fontSize: dataForm.FONT_SIZE, |
|
|
fontSize: dataForm.FONT_SIZE, |
|
|
fontFamily: dataForm.FONT, |
|
|
fontFamily: dataForm.FONT, |
|
|
zIndex: '1000', |
|
|
zIndex: '1000', |
|
|
left: dataForm.COORDINATE |
|
|
position:'relative', |
|
|
|
|
|
/*left: dataForm.COORDINATE |
|
|
? dataForm.COORDINATE.substring(0, 3) + 'px' |
|
|
? dataForm.COORDINATE.substring(0, 3) + 'px' |
|
|
: '', |
|
|
: '', |
|
|
top: dataForm.COORDINATE |
|
|
top: dataForm.COORDINATE |
|
|
? dataForm.COORDINATE.substring(3, 6) + 'px' |
|
|
? dataForm.COORDINATE.substring(3, 6) + 'px' |
|
|
: '', |
|
|
: '',*/ |
|
|
maxHeight:boardHeight + 'px', |
|
|
maxHeight:boardHeight + 'px', |
|
|
}" class="textBoard2 boardTextStyle" v-html=" |
|
|
}" class="textBoard2 boardTextStyle" v-html=" |
|
|
dataForm.CONTENT |
|
|
dataForm.CONTENT |
|
@ -52,9 +58,9 @@ |
|
|
</el-col> |
|
|
</el-col> |
|
|
<el-col class="infoBoardButton" :span="16"> |
|
|
<el-col class="infoBoardButton" :span="16"> |
|
|
<el-radio-group v-model="radio1" @input="alignment(radio1)"> |
|
|
<el-radio-group v-model="radio1" @input="alignment(radio1)"> |
|
|
<el-radio-button :label="1">左对齐</el-radio-button> |
|
|
<el-radio-button :label="0">左对齐</el-radio-button> |
|
|
<el-radio-button :label="2">左右居中</el-radio-button> |
|
|
<el-radio-button :label="2">左右居中</el-radio-button> |
|
|
<el-radio-button :label="3">右对齐</el-radio-button> |
|
|
<el-radio-button :label="1">右对齐</el-radio-button> |
|
|
</el-radio-group> |
|
|
</el-radio-group> |
|
|
<!-- <el-button type="primary" @click="alignment(1)" size="mini" |
|
|
<!-- <el-button type="primary" @click="alignment(1)" size="mini" |
|
|
>左对齐</el-button |
|
|
>左对齐</el-button |
|
@ -419,7 +425,8 @@ export default { |
|
|
// COORDINATE: "", |
|
|
// COORDINATE: "", |
|
|
STATE: 'true', |
|
|
STATE: 'true', |
|
|
STAY: '5', |
|
|
STAY: '5', |
|
|
screenSize: devicePixel |
|
|
screenSize: devicePixel, |
|
|
|
|
|
formatStyle :'2' |
|
|
} |
|
|
} |
|
|
this.content = '请输入内容' |
|
|
this.content = '请输入内容' |
|
|
} else { |
|
|
} else { |
|
@ -648,13 +655,15 @@ export default { |
|
|
width: '' |
|
|
width: '' |
|
|
} |
|
|
} |
|
|
const templateContent = [] |
|
|
const templateContent = [] |
|
|
|
|
|
debugger |
|
|
templateContent.push({ |
|
|
templateContent.push({ |
|
|
content: this.dataForm.CONTENT, |
|
|
content: this.dataForm.CONTENT, |
|
|
coordinate: this.dataForm.COORDINATE, |
|
|
coordinate: this.dataForm.COORDINATE, |
|
|
fontColor: this.getColorStyle(this.dataForm.COLOR), |
|
|
fontColor: this.getColorStyle(this.dataForm.COLOR), |
|
|
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
|
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
|
fontSpacing: this.dataForm.SPEED, |
|
|
fontSpacing: this.dataForm.SPEED, |
|
|
fontType: this.getFontStyle(this.dataForm.FONT) |
|
|
fontType: this.getFontStyle(this.dataForm.FONT), |
|
|
|
|
|
formatStyle : this.dataForm.formatStyle |
|
|
}) |
|
|
}) |
|
|
// this.$emit("addInfoMode", this.dataForm); |
|
|
// this.$emit("addInfoMode", this.dataForm); |
|
|
addTemplate(params1, method).then(data => { |
|
|
addTemplate(params1, method).then(data => { |
|
@ -724,6 +733,15 @@ export default { |
|
|
return font |
|
|
return font |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
getTextAlign(font) { |
|
|
|
|
|
if (font == '0'){ |
|
|
|
|
|
return 'left' |
|
|
|
|
|
} else if (font == '1'){ |
|
|
|
|
|
return 'right' |
|
|
|
|
|
} else { |
|
|
|
|
|
return 'center' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
// 文字对齐方式 |
|
|
// 文字对齐方式 |
|
|
alignment(alignmentNum) { |
|
|
alignment(alignmentNum) { |
|
|
this.alignmentNum = alignmentNum |
|
|
this.alignmentNum = alignmentNum |
|
@ -739,7 +757,7 @@ export default { |
|
|
|
|
|
|
|
|
switch (alignmentNum) { |
|
|
switch (alignmentNum) { |
|
|
// 左对齐 |
|
|
// 左对齐 |
|
|
case 1: |
|
|
case 0: |
|
|
divContent2[0].style.justifyContent = 'left' |
|
|
divContent2[0].style.justifyContent = 'left' |
|
|
divContent2[0].style.alignItems = 'center' |
|
|
divContent2[0].style.alignItems = 'center' |
|
|
// textBoard2[0].style.textAlign = "left"; |
|
|
// textBoard2[0].style.textAlign = "left"; |
|
@ -755,7 +773,7 @@ export default { |
|
|
|
|
|
|
|
|
break |
|
|
break |
|
|
// 右对齐 |
|
|
// 右对齐 |
|
|
case 3: |
|
|
case 1: |
|
|
divContent2[0].style.justifyContent = 'right' |
|
|
divContent2[0].style.justifyContent = 'right' |
|
|
divContent2[0].style.alignItems = 'center' |
|
|
divContent2[0].style.alignItems = 'center' |
|
|
// textBoard2[0].style.textAlign = "right"; |
|
|
// textBoard2[0].style.textAlign = "right"; |
|
@ -788,6 +806,10 @@ export default { |
|
|
var textLeft = this.addZero(textBoard2[0].offsetLeft) |
|
|
var textLeft = this.addZero(textBoard2[0].offsetLeft) |
|
|
var textTop = this.addZero(textBoard2[0].offsetTop) |
|
|
var textTop = this.addZero(textBoard2[0].offsetTop) |
|
|
this.dataForm.COORDINATE = textLeft + textTop |
|
|
this.dataForm.COORDINATE = textLeft + textTop |
|
|
|
|
|
debugger |
|
|
|
|
|
if (alignmentNum != undefined){ |
|
|
|
|
|
this.dataForm.formatStyle = alignmentNum |
|
|
|
|
|
} |
|
|
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE"); |
|
|
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE"); |
|
|
}, |
|
|
}, |
|
|
addZero(num) { |
|
|
addZero(num) { |
|
@ -861,7 +883,7 @@ export default { |
|
|
justify-content: left; |
|
|
justify-content: left; |
|
|
} |
|
|
} |
|
|
.boardTextStyle { |
|
|
.boardTextStyle { |
|
|
line-height: 1; |
|
|
/*line-height: 1;*/ |
|
|
caret-color: rgba(0, 0, 0, 0); |
|
|
caret-color: rgba(0, 0, 0, 0); |
|
|
user-select: none; |
|
|
user-select: none; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|