NanjingMuseumWuJinZang/src/views/GameView.vue

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
const isShowToastFromGame = ref(false)
const input1 = ref("")
const input2 = ref("")
const input1Ref = ref(null)
const input2Ref = ref(null)

const router = useRouter()


const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()


const handleInput1 = () => {
  console.log("第一个框得内容", input1.value)
  if (input1.value.length >= 7) {
    input1.value = input1.value.slice(0, 7) // 限制输入长度
    // input2Ref.value.focus() // 聚焦到第二个输入框
  }
}

const checkInput1 = (event) => {
  if (event.key === "Backspace" && input1.value.length === 0) {
    input2.value = "" // 清空第二个输入框
    input1Ref.value.focus() // 聚焦回到第一个输入框
  }
}

const handleInput2 = () => {
  // 这里可以添加类似的逻辑，但通常不需要，因为我们假设第二个输入框不会自动跳转回去
  if (input2.value.length >= 7) {
    input2.value = input2.value.slice(0, 7)
  }
}

const checkInput2 = (event) => {
  if (event.key === "Backspace" && input2.value.length === 0) {
    input1Ref.value.focus() // 如果需要从第二个输入框清空后聚焦回第一个输入框
  }
}
const saveTitle = () => {
  var iframe = document.getElementById("gameIframe")
  var iframeWindow = iframe.contentWindow || window.frames["yourIframeId"]
  if (iframeWindow) {
    iframeWindow.saveTitle(
      input1.value.length >= 7
        ? input1.value + "\n" + '线上创作'
        : input1.value
    )
    isShowToastFromGame.value = false
  }
}

onMounted(() => {
  window.isShowToastFromGame = () => {
    isShowToastFromGame.value = true
    input1.value = ""
    input2.value = ""
  }

  window.closeGame = () => {
    router.replace('/more-content?anchorIdx=2')
  }
})
</script>

<template>
  <div class="game-box">
    <iframe
      id="gameIframe"
      :src="`./game/index.html`"
    />

    <!-- edit弹框 -->
    <div
      v-show="isShowToastFromGame"
      class="edit-box"
    >
      <div class="input-box">
        <input
          ref="input1Ref"
          v-model="input1"
          @input="handleInput1"
          @keyup="checkInput1"
        >
        <!-- <input
          ref="input2Ref"
          v-model="input2"
          :readonly="input1.length < 7"
          @input="handleInput2"
          @keyup="checkInput2"
        > -->
        <div class="tips">
          请输入内容
        </div>
      </div>
      <div
        class="cencel-btn"
        @click="isShowToastFromGame = false"
      >
        取消
      </div>
      <div
        class="yes-btn"
        @click="saveTitle"
      >
        保存
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
  .game-box {
    width: 100%;
    height: 100%;
    position: relative;

    > iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .edit-box {
      width: 125%;
      height: 35vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: url(@/assets/images/game-tip.png);
      background-size: 100% 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-family: "KaiTi";

      > .input-box {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-bottom: 10%;
        margin-right: 5%;

        > input {
          width: 100%;
          height: 45px;
          background: none;
          border: none;
          font-size: 20px;
          white-space: pre-wrap;
          color: white;
          border-bottom: 1px solid rgba(255, 255, 255, 0.548);
          font-family: "KaiTi";
          letter-spacing: 2px;
        }

        .tips {
          font-family: "KaiTi";
          font-size: 14px;
          margin-top: calc(
            5 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          color: rgba(255, 255, 255, 0.418);
        }
      }

      > textarea {
        width: 34%;
        height: 40%;
        background: none;
        border: none;
        font-size: 20px;
        white-space: pre-wrap;
      }

      > .cencel-btn {
        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: url(@/assets/images/game-tip-cancel.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        position: absolute;
        left: 30%;
        bottom: calc(
          60 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        padding: 5px 10px;
        font-family: "KaiTi";
      }

      > .yes-btn {
        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: url(@/assets/images/game-tip-yes.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f4e09d;
        position: absolute;
        right: 38%;
        bottom: calc(
          60 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        padding: 5px 10px;
        font-family: "KaiTi";
      }
    }
  }
</style>