<template> <div class="boardPreview" ref="compBox"> <div class="boardBox" :style="boardStyle"> <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 { boardStyle:null, boardTxtStyle:null, contentArr:{ type:Array, default:()=>[] }, lineTotal:10, } }, props:{ boardWH: { type: String, default: "300*200" }, tpl: { type: Object, default: {} }, }, watch:{ boardWH:{ handler(newV){ this.setStyle(); }, immediate:true }, tpl:{ handler(newV){ this.contentArr = this.tpl.content.replace(/\n/g, '&&&&&').replace(/ /g, ' ').split('&&&&&'); 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 arr = this.boardWH.split("*"); let scale = 1; if (arr[0] / arr[1] > boxW / boxH) { scale = boxW / arr[0]; } else { scale = boxH / arr[1]; } this.boardStyle = { width: `${arr[0] * scale}px`, height: `${arr[1] * scale}px`, "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle] } let fontSize = 0; if(_.isString(this.tpl.fontSize)){ fontSize = this.tpl.fontSize.replace('px', '')*1; }else{ fontSize = this.tpl.fontSize; } this.boardTxtStyle = { "color": "#" + this.tpl.fontColor, "font-size": `${fontSize*scale}px`, "font-family": this.fontTypeDic[this.tpl.fontType || '3'], "min-height": `${fontSize * scale}px`, } this.lineTotal = Math.floor(arr[1]/ fontSize); }) } } } </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; } } } </style>