jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue

<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: 0
        }
    },
    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.textContent.replaceAll(/\\\\n/g, '\n').replaceAll(/ /g, '&nbsp').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 conW = this.tpl.displayAreaWidth;
                let conH = this.tpl.displayAreaHeight;
                let scale = 1;
                if (conW / conH > boxW / boxH) {
                    scale = boxW / conW;
                } else {
                    scale = boxH / conH;
                }
                this.boardStyle =  {
                    width: `${conW * scale}px`,
                    height: `${conH * scale}px`,
                    "background-color":`${this.tpl.backgroundColor}px`,
                    "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.verticalAlignment]
                }
                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.foregroundColor, 
                    "font-size": `${fontSize*scale}px`,
                    "font-family": this.fontTypeDic[this.tpl.font || '3'],
                    "min-height": `${fontSize * scale}px`
                }
                this.lineTotal = Math.floor(conH / 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>