GCLS_Page_TC/src/components/corpus/StrockplayredlineTable.vue

<!--  -->
<template>
  <div :class="['strockplayRedInner']">
    <!-- <div
      @click="playHanzi"
      :class="[
        'strock-play-box',
        themeColor == 'green'
          ? 'green-border'
          : themeColor == 'red'
          ? 'red-border'
          : themeColor == 'brown'
          ? 'brown-border'
          : 'blue-border',
      ]"
      v-if="playStorkes"
    ></div> -->
    <template v-if="Book_text != '〇'">
      <div
        :id="targetDivGray"
        class="character-target-div character-target-div-gray"
      ></div>
      <div :id="targetDiv" class="character-target-div"></div>
    </template>
    <template v-else>
      <span class="book-text">{{ Book_text }}</span>
    </template>
    <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' }"
    />
    <!-- <svg-icon
      icon-class="tian"
      :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
    /> -->
  </div>
</template>

<script>
import { getContentFile } from "@/api/api";
const HanziWriter = require("hanzi-writer");
export default {
  name: "Strockplayredline",
  components: {},
  props: [
    "targetDiv",
    "Book_text",
    "playStorkes",
    "strokeColor",
    "strokeColorgray",
    "curItem",
    "strokeNumber",
    "targetDivGray",
    "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;
      if (_this.Book_text == "〇") return false;
      _this.writer = null;
      //var ren = require("hanzi-writer-data/国");
      _this.writer = HanziWriter.default.create(
        _this.targetDiv,
        _this.Book_text,
        {
          padding: 5,
          showOutline: true,
          strokeColor: _this.strokeColor,
          charDataLoader: function (char, onComplete) {
            let charData = _this.handleData(Number(_this.strokeNumber));
            onComplete(charData);
          },
        }
      );
      _this.writer = HanziWriter.default.create(
        _this.targetDivGray,
        _this.Book_text,
        {
          padding: 5,
          showOutline: true,
          strokeColor: _this.strokeColorgray,
          charDataLoader: function (char, onComplete) {
            onComplete(JSON.parse(JSON.stringify(_this.curItem)));
          },
        }
      );
    },
    handleData(stroke_num) {
      if (this.curItem) {
        let charData = JSON.parse(JSON.stringify(this.curItem));
        if (stroke_num) {
          charData.strokes = charData.strokes.slice(0, stroke_num);
          charData.medians = charData.medians.slice(0, stroke_num);
        } else if (charData) {
          charData.radStrokes = [];
        }
        return charData;
      }
    },
    playHanzi(event) {
      let _this = this;
      _this.writer.animateCharacter();
      event.stopPropagation();
    },
  },
  //生命周期 - 创建完成（可以访问当前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 "../common.scss";
.strockplayRedInner {
  position: relative;

  width: 100%; //444px
  height: 100%; //480px
}
.character-target-div {
  width: 100%;
  height: 100%;
  z-index: 99999;
  position: absolute;
}
.character-target-div-gray {
  top: 0;
  left: 0;
}
.tian-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.animate-butto {
  width: 240px;
  height: 160px;
  font-size: 28px;
}
.book-text {
  font-size: 96px;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 128px;
}
</style>