|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="boardPreview" ref="compBox"> |
|
|
|
<div class="boardBox" :style="boardStyle"> |
|
|
|
<div class="boardBox" :style="boardStyle" v-if="isReady"> |
|
|
|
<p class="boardTxt" v-for="item,index in contentArr" :key="index" :style="boardTxtStyle" v-html="item" v-if="(index + 1) <= lineTotal"> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
@ -11,6 +11,7 @@ export default { |
|
|
|
name:"BoardPreview", |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
isReady: false, |
|
|
|
boardStyle:null, |
|
|
|
boardTxtStyle:null, |
|
|
|
contentArr:{ |
|
|
|
@ -53,21 +54,28 @@ export default { |
|
|
|
methods:{ |
|
|
|
setStyle() { |
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
let boxW = this.$refs["compBox"].clientWidth; |
|
|
|
let boxH = this.$refs["compBox"].clientHeight; |
|
|
|
let conW = this.tpl.displayAreaWidth; |
|
|
|
let conH = this.tpl.displayAreaHeight; |
|
|
|
let arr = this.boardWH.split("*"); |
|
|
|
let scale = 1; |
|
|
|
if (conW / conH > boxW / boxH) { |
|
|
|
scale = boxW / conW; |
|
|
|
if (boxH > 20) { //判断是否设置了显示高度，判断>0即可，20是为了兼容误差 |
|
|
|
if (arr[0] / arr[1] > boxW / boxH) { |
|
|
|
scale = boxW / arr[0]; |
|
|
|
} else { |
|
|
|
scale = boxH / arr[1]; |
|
|
|
} |
|
|
|
} else { |
|
|
|
scale = boxH / conH; |
|
|
|
if (arr[0] > boxW) { |
|
|
|
scale = boxW / arr[0]; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.boardStyle = { |
|
|
|
width: `${conW * scale}px`, |
|
|
|
height: `${conH * scale}px`, |
|
|
|
width: `${arr[0] * scale}px`, |
|
|
|
height: `${arr[1] * scale}px`, |
|
|
|
"background-color":`${this.tpl.backgroundColor}px`, |
|
|
|
"align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.verticalAlignment] |
|
|
|
"align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.verticalAlignment] //模板的字段为为formatStyle |
|
|
|
} |
|
|
|
let fontSize = 0; |
|
|
|
if (_.isString(this.tpl.fontSize)) { |
|
|
|
@ -76,12 +84,14 @@ export default { |
|
|
|
fontSize = this.tpl.fontSize; |
|
|
|
} |
|
|
|
this.boardTxtStyle = { |
|
|
|
"color": "#" + this.tpl.foregroundColor, |
|
|
|
"color": "#" + this.tpl.foregroundColor, //模板的字段为fontColor |
|
|
|
"font-size": `${fontSize*scale}px`, |
|
|
|
"font-family": this.fontTypeDic[this.tpl.font || '3'], |
|
|
|
"font-family": this.fontTypeDic[this.tpl.font || '3'], //模板的字段为fontType |
|
|
|
"min-height": `${fontSize * scale}px` |
|
|
|
} |
|
|
|
this.lineTotal = Math.floor(conH / fontSize); |
|
|
|
this.lineTotal = Math.floor(arr[1] / fontSize); |
|
|
|
this.isReady = true; |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
hui
2 years ago