water_maintenance/src/components/WindowQingXiCheAndQv/WindowTxt.vue

<script setup>
import dayjs from "dayjs";
import { computed, onMounted, onUnmounted, ref } from "vue";
import { WindowTxtStore } from "@/components/WindowQingXiCheAndQv/store/WindowTxtStore.js";
import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";

// 当前展示的内容
let txt = ref("");

let txtCode = "WindowTxt";

/**
 * 退出的逻辑
 */
const exitEvent = () => {
    ComVal.find().fpsEventDel(txtCode);
    WindowTxtStore().obj.WindowTxtViewOpen = false;
}

onMounted(() => {
    txtEvent();
});


/**
 * 一个一个字展示的逻辑
 */
const txtEvent = () => {

    // console.log(
    //     "WindowTxtStore().obj.WindowTxtViewTxt 开始展示文字",
    //     WindowTxtStore().obj.WindowTxtViewTxt
    // );

    if (typeof WindowTxtStore().obj.WindowTxtViewTxt != "string") {
        return;
    }

    // 分割字符串
    var txtArray = WindowTxtStore().obj.WindowTxtViewTxt.split("");
    // 开始从第一个文字写入
    var txtArrayIndex = -1;
    
    ComVal.find().fpsEventDel(txtCode);
    ComVal.find().fpsEventAdd(txtCode, null, (1000 / 15), function(fpsEventAddRet) {

        try {

            // 写入完成了
            if (txtArrayIndex > txtArray.length) {
                ComVal.find().fpsEventDel(fpsEventAddRet.code);
                return;
            }

            var editTxt = "";
            for (var i = 0; i < txtArrayIndex; i++) {
                if (txtArray[i] == null || txtArray[i] == undefined) {
                    continue;
                }

                editTxt += txtArray[i];
            }

            txtArrayIndex += 1;

            // console.log("本次写入的文字", editTxt);
            txt.value = editTxt;

        } catch (e) {
            ComVal.find().fpsEventDel(fpsEventAddRet.code);
            return;
        }


    });
    
}

</script>

<template>
    <div class="WindowTxt">
        
        <div class="main">
            <img class="exit" v-on:click="exitEvent()" src="../../assets/res/img/window/exit.png" />
            <!-- <div class="title" >文字信息</div> -->
            <div class="title" >操作事项</div>
            <div class="content commonsScrollbar">
                {{ txt }}
            </div>

        </div>

    </div>
</template>

<style lang="less" >
* {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
</style>

<style lang="less" scoped>
@import "./css/commonsScrollbar.less";

.WindowTxt * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.WindowTxt {
    position: fixed;
    z-index: 0;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 0px;
    z-index: 1000;

    .main {

        position: fixed;
        width: 35.4285rem;
        height: 21.8571rem;
        top: 25%;
        left: 10%;

        background-image: url("../../assets/res/img/window/bg.png");
        background-position: center;
        background-size: 100% 100%;

        .exit {

            position: absolute;
            width: 1.4285rem;
            top: 3.0714rem;
            right: 3.2142rem;
            // 手势
            cursor:pointer;

        }

        .title {
            position: absolute;
            color: #FEFEFE;
            font-size: 1.4285rem;
            font-weight: 500;
            top: 2.65rem;
            left: 5.428rem;
        }

        .content {

            position: absolute;
            top: 5rem;
            left: 3.5714rem;
            right: 3.5714rem;
            bottom: 3rem;
            color: #FEFEFE;
            font-size: 1.2857rem;
            font-weight: 400;
            line-height: 2.15rem;

            // 换行
            word-break: break-all;
            /** 让文本带有 \n 自动换行 */
            white-space: pre-wrap;
            // text-wrap: normal;
            // white-space: normal;

        }


    }

    
}
</style>