You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.3 KiB
117 lines
3.3 KiB
<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">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:"BoardPreview",
|
|
data(){
|
|
return {
|
|
boardStyle:null,
|
|
boardTxtStyle:null,
|
|
contentArr:{
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
}
|
|
},
|
|
props:{
|
|
boardWH: {
|
|
type: String,
|
|
default: "300*200"
|
|
},
|
|
tpl: {
|
|
// {
|
|
// "id": 3,
|
|
// "category": "0",
|
|
// "content": "保持车距，控制车速",
|
|
// "screenSize": "768*64",
|
|
// "fontColor": "FFFF00",
|
|
// "fontSize": "64",
|
|
// "fontType": "2",
|
|
// "fontSpacing": "0",
|
|
// "rollingSpeed": null,
|
|
// "stopTime": "50",
|
|
// "inScreenMode": "1",
|
|
// "formatStyle": "2",
|
|
// "remark": null,
|
|
// "createTime": "2024-01-06 10:40:19",
|
|
// "updateTime": "2024-01-06 11:04:53"
|
|
// }
|
|
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
},
|
|
watch:{
|
|
boardWH:{
|
|
handler(newV){
|
|
this.setStyle();
|
|
},
|
|
immediate:true
|
|
},
|
|
tpl:{
|
|
handler(newV){
|
|
this.contentArr = this.tpl.content.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, ' ').split('&&&&&');
|
|
this.setStyle();
|
|
},
|
|
deep:true,
|
|
immediate:true
|
|
}
|
|
},
|
|
computed:{
|
|
},
|
|
mounted(){
|
|
},
|
|
methods:{
|
|
setStyle() {
|
|
this.$nextTick(() => {
|
|
let boxW = this.$refs["compBox"].offsetWidth;
|
|
let boxH = this.$refs["compBox"].offsetHeight;
|
|
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]
|
|
}
|
|
this.boardTxtStyle = {
|
|
"color": "#" + this.tpl.fontColor,
|
|
"font-size": `${this.tpl.fontSize.replace('px','')*scale}px`,
|
|
"font-family": this.fontTypeDic[this.tpl.fontType],
|
|
"min-height": `${this.tpl.fontSize.replace('px', '') * scale}px`
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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: flex-start;
|
|
.boardTxt{
|
|
color: #f00;
|
|
line-height: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|