GCLS_Page_Book_Component_NPC/src/components/common/Strockred.vue

<!--  -->
<template>
  <div class="strockredBox">
    <div class="strockred">
      <div @click="resetHanzi" class="strock-play-box" v-if="playStorkes">
        <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
      </div>
      <div
        :class="wordNum == '2' ? 'character-target-div_220' : ''"
        :id="targetDiv"
        class="character-target-div"
      ></div>
    </div>
  </div>
</template>

<script>
import { getLogin } from "../../api/ajax";
const HanziWriter = require("hanzi-writer");
export default {
  name: "Strockred",
  components: {},
  props: ["targetDiv", "hanzicolor", "Book_text", "playStorkes", "wordNum"],
  data() {
    return {
      writer: null,
      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
    };
  },
  computed: {},
  watch: {
    hanzicolor(newVal, oldVal) {
      this.updateColor(newVal);
    },
    Book_text: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          let _this = this;
          _this.$nextTick(() => {
            _this.initHanziwrite();
          });
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      let options = {
        charDataLoader: function (char, onComplete) {
          let MethodName = "hz_resource_manager-GetHZStrokesContent";
          let data = {
            hz: char,
          };
          getLogin(MethodName, data).then((res) => {
            onComplete(res);
          });
        },
        padding: 5,
        showCharacter: false,
        strokeColor: _this.hanzicolor,
        drawingColor: _this.hanzicolor,
        drawingWidth: 6,
      };
      _this.writer = HanziWriter.default.create(
        _this.targetDiv,
        _this.Book_text,
        options
      );
      _this.writer.quiz();
    },
    resetHanzi() {
      let _this = this;
      _this.writer.quiz();
    },
    updateColor(color) {
      let _this = this;
      _this.writer.updateColor("strokeColor", color);
      _this.writer.updateColor("drawingColor", color);
    },
  },
  //生命周期 - 创建完成（可以访问当前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类
.strockredBox {
  width: 100%;
  height: 100%;
}
.strockred {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  //chinawrite220.png
  .character-target-div {
    width: 100%;
    height: 100%;
    background: url("../../assets/common/bg-field.png") center no-repeat;
    background-size: 100% 100%;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    &_220 {
      background: url("../../assets/common/chinawrite220.png") center no-repeat;
      background-size: 100% 100%;
      border-radius: 0;
    }
  }
  .animate-butto {
    width: 240px;
    height: 160px;
    font-size: 28px;
  }
}
.questionMiddle {
  .strockred {
    .character-target-div {
      background: url("../../assets/common/bg-field.png") center no-repeat;
      background-size: 100% 100%;
      border-radius: 16px;
      &_220 {
        background: url("../../assets/common/chinawrite220.png") center
          no-repeat;
        background-size: 100% 100%;
        border-radius: 0;
      }
    }
    .animate-butto {
      width: 160px;
      height: 106px;
      font-size: 18px;
    }
  }
}
.questionSmall {
  .strockred {
    .character-target-div {
      background: url("../../assets/common/bg-field.png") center no-repeat;
      background-size: 100% 100%;
      border-radius: 12px;
      &_220 {
        background: url("../../assets/common/chinawrite220.png") center
          no-repeat;
        background-size: 100% 100%;
        border-radius: 0;
      }
    }
    .animate-butto {
      width: 120px;
      height: 80px;
      font-size: 14px;
    }
  }
}
</style>