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