GCLS_Page_Book_Component_NPC/src/components/common/Strockplay.vue

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

<script>
import { getLogin } from "../../api/ajax";
const HanziWriter = require("hanzi-writer");
export default {
  components: {},
  props: [
    "targetDiv",
    "Book_text",
    "playStorkes",
    "strokeColor",
    "wordNum",
    "className",
  ],
  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;
      //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,
            };
            getLogin(MethodName, data).then((res) => {
              onComplete(res);
            });
          },
          padding: 5,
          showOutline: true,
          strokeColor: _this.strokeColor ? _this.strokeColor : "#000",
        }
      );
    },
    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类
.strockplayInner {
  position: relative;
  margin: 0 auto;
  width: 100%; //444px
  height: 100%; //480px
}
.character-target-div {
  width: 100%; //444px
  height: 100%; //480px
  background: #fff url("../../assets/common/bg-rice.png") center no-repeat;
  background-size: 100% 100%;
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  &.morewords {
    background: url("../../assets/common/chinaTina220.png") center no-repeat;
    background-size: 100% 100%;
  }
}
.animate-butto {
  width: 240px;
  height: 160px;
  font-size: 28px;
}
.questionMiddle {
  .character-target-div {
    border-radius: 16px;
    &.morewords {
      background: url("../../assets/common/chinaTina220.png") center no-repeat;
      background-size: 100% 100%;
    }
  }
  .animate-butto {
    width: 160px;
    height: 106px;
    font-size: 18px;
  }
}
.questionSmall {
  .character-target-div {
    border-radius: 12px;
    &.morewords {
      background: url("../../assets/common/chinaTina220.png") center no-repeat;
      background-size: 100% 100%;
    }
  }
  .animate-butto {
    width: 120px;
    height: 80px;
    font-size: 14px;
  }
}
// .adult-strockplay {
//   .character-target-div {
//     background: #fff url("../../assets/adult/adult-hz-tian.png") center
//       no-repeat;
//     background-size: 100% 100%;
//   }
//   .strock-play-box {
//     position: absolute;
//     top: 0;
//     right: 0;
//     width: 20px;
//     height: 20px;
//     background: #fff url("../../assets/adult/adult-play-strock.png") center
//       no-repeat;
//     background-size: 100% 100%;
//   }
// }
</style>