hui
1 year ago
5 changed files with 182 additions and 72 deletions
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div class="boardPreview" ref="compBox"> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:"BoardPreview", |
|||
data(){ |
|||
return { |
|||
isReady: false, |
|||
boardStyle:null, |
|||
boardTxtStyle:null, |
|||
contentArr:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
}, |
|||
lineTotal: 0 |
|||
} |
|||
}, |
|||
props:{ |
|||
tpl: { |
|||
type: Object, |
|||
default: ()=>{} |
|||
}, |
|||
}, |
|||
watch:{ |
|||
tpl:{ |
|||
handler(newV){ |
|||
this.contentArr = this.tpl.CONTENT.replaceAll(/\\\\n/g, '\n').replaceAll(/\\=/g, '=').replaceAll(/\\,/g, ',').replaceAll(/ /g, ' ').split('\n'); |
|||
this.setStyle(); |
|||
}, |
|||
deep:true, |
|||
immediate:true |
|||
} |
|||
}, |
|||
computed:{ |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
methods:{ |
|||
setStyle() { |
|||
this.$nextTick(() => { |
|||
|
|||
let boxW = this.$refs["compBox"].clientWidth; |
|||
let boxH = this.$refs["compBox"].clientHeight; |
|||
let boardW = this.tpl.width; |
|||
let boardH = this.tpl.height; |
|||
let scale = 1; |
|||
if (boxH > 20) { //判断是否设置了显示高度，判断>0即可，20是为了兼容误差 |
|||
if (boardW / boardH > boxW / boxH) { |
|||
scale = boxW / boardW; |
|||
} else { |
|||
scale = boxH / boardH; |
|||
} |
|||
} else { |
|||
if (boardW > boxW) { |
|||
scale = boxW / boardW; |
|||
} |
|||
} |
|||
|
|||
this.boardStyle = { |
|||
width: `${boardW * scale}px`, |
|||
height: `${boardH * scale}px`, |
|||
"align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle] //模板的字段为为formatStyle |
|||
} |
|||
let fontSize = 0; |
|||
if (_.isString(this.tpl.FONT_SIZE)) { |
|||
fontSize = this.tpl.FONT_SIZE.replace('px', '') * 1; |
|||
} else { |
|||
fontSize = this.tpl.fontSize; |
|||
} |
|||
this.boardTxtStyle = { |
|||
"color": "#" + this.tpl.COLOR, //模板的字段为fontColor |
|||
"font-size": `${fontSize*scale}px`, |
|||
"font-family": this.fontTypeDic[this.tpl.FONT || '3'], //模板的字段为fontType |
|||
"min-height": `${fontSize * scale}px` |
|||
} |
|||
this.lineTotal = Math.floor(boardH / fontSize); |
|||
this.isReady = true; |
|||
|
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.boardPreview{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.boardBox { |
|||
background-color: #000; |
|||
display: flex; |
|||
overflow: hidden; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.boardTxt{ |
|||
color: #f00; |
|||
line-height: 1; |
|||
margin-bottom: 0; |
|||
word-break: keep-all; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue