GCLS_Page_TC/src/components/corpus/Strockplay.vue

<!--  -->
<template>
  <div class="strockplayInner" :class="className">
    <div
      @click="playHanzi"
      class="strock-play-box"
      :style="{ width: palyWidth, height: palyWidth }"
      v-if="playStorkes"
    >
      <svg-icon
        icon-class="playStorkes"
        className="playStorkes-btn"
        v-if="playStorkes"
        @click="playHanzi"
        :style="{ color: strokePlayColor, width: palyWidth, height: palyWidth }"
      />
    </div>
    <div
      :class="wordNum == '2' ? 'morewords' : ''"
      :id="targetDiv"
      class="character-target-div"
    >
      <svg-icon
        icon-class="tian"
        className="tian-bg"
        v-if="BoxbgType == 0"
        :style="{ color: '#DEDEDE' }"
      />
      <svg-icon
        icon-class="mi"
        className="tian-bg"
        v-if="BoxbgType == 1"
        :style="{ color: '#DEDEDE' }"
      />
    </div>
  </div>
</template>

<script>
import { getContentFile } from "@/api/api";
const HanziWriter = require("hanzi-writer");
export default {
  components: {},
  props: [
    "targetDiv",
    "Book_text",
    "playStorkes",
    "strokeColor",
    "wordNum",
    "className",
    "strokePlayColor",
    "palyWidth",
    "BoxbgType",
  ],
  data() {
    return {
      writer: null,
    };
  },
  computed: {},
  watch: {
    targetDiv: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          let _this = this;
          _this.$nextTick(() => {
            _this.initHanziwrite();
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      let node = document.getElementById(`${_this.targetDiv}`);
      if (node.children.length > 1) {
        node.removeChild(node.children[1]);
      }
      //var ren = require("hanzi-writer-data/国");
      _this.writer = HanziWriter.default.create(
        _this.targetDiv,
        _this.Book_text,
        {
          charDataLoader: function (char, onComplete) {
            let MethodName = "hz_resource_manager-GetHZStrokesContent";
            let data = {
              hz: char,
            };
            getContentFile(MethodName, data).then((res) => {
              onComplete(res);
            });
          },
          padding: 5,
          showOutline: true,
          strokeColor: _this.strokeColor ? _this.strokeColor : "#333",
        }
      );
    },
    playHanzi() {
      let _this = this;
      _this.writer.animateCharacter();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      _this.initHanziwrite();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import "../../assets/Scss/_handle.scss";
.strockplayInner {
  position: relative;
  margin: 0 auto;
  width: 100%; //444px
  height: 100%; //480px
  .strock-play-box {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
  }
}
.character-target-div {
  width: 100%; //444px
  height: 100%; //480px
  //   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
  //     no-repeat;
  background-size: 100% 100%;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  position: relative;
  &.morewords {
    // background: url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
    background-size: 100% 100%;
  }
}
.tian-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.animate-butto {
  width: 240px;
  height: 160px;
  font-size: 28px;
}
.playStorkes-btn {
  position: absolute;
  top: 0;
  right: 0;
}
</style>