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',
    'fontSize',
  ],
  data() {
    return {
      writer: null,
    };
  },
  computed: {},
  watch: {
    targetDiv: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          let _this = this;
          _this.$nextTick(() => {
            _this.initHanziwrite();
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
    strokeColor: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          let _this = this;
          _this.$nextTick(() => {
            _this.initHanziwrite();
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
    // fontSize: {
    //   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}`);
      let noe2 = document.getElementById(`${_this.targetDivGray}`);
      if (node.children.length > 0) {
        noe2.removeChild(noe2.children[0]);
        node.removeChild(node.children[0]);
      }
      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: 998;
  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>