vue3-esign resize报错

24 阅读1分钟

问题:签名所在的组件已经销毁了,但是resize的时候还是会被监听到是为什么?

    组件销毁时在第二张图的83、84行onBeforeUnmount的断点已经触发了,我在下个组件里面resize的时候还是会报如图所示的错误。我并没有使用KeepAlive。

   所以我猜想是不是源码中,第二张图中78行和84行添加监听事件和移除监听事件不一致引起的?

onBeforeMount(() => {  window.addEventListener("resize", () => {    $_resizeHandler();  });});onBeforeUnmount(() => {  window.removeEventListener("resize", $_resizeHandler);});

控制台报错截图

下面是我的代码

<template>  <section>    <div class="sign_name">      <div class="show-sign-content" >        <p class="sign-tips">请在下方框内正确签名</p>        <vue3-esign          ref="vueEsignRef"          v-model:bgColor="state.vueEsignBgColor"          :is-clear-bg-color="false"          :width="800"          :height="400"          :is-crop="state.isCrop"          :line-width="state.lineWidth"          :line-color="state.lineColor">        </vue3-esign>        <div class="btnArea">          <custom-button type="cyan" @click='commonBack("")'>取消</custom-button>          <custom-button type="error" @click="esignReset()">清除</custom-button>          <custom-button type="success" @click="sureSign()">确定</custom-button>        </div>      </div>    </div>  </section></template><script setup name="PayStep">import { Vue3Esign } from 'vue3-esign'import store from '@/store'const vueEsignRef = ref()const { updateStoreObjItem } = store.userStoreconst showModal = inject("showModal")const commonBack = inject("commonBack")const emit = defineEmits(["callback"])const state = reactive({  isCrop: true, // 是否裁剪, 在画布设定尺寸基础上裁掉四周空白部分  vueEsignBgColor: "#fff",  lineWidth: 6,  lineColor: "#000",  imgBase64: "",  applicationInfo: null})const sureSign = async() => {  showModal("请求中,请稍后...", "load", 0)  try {    const res = await vueEsignRef.value.generate()    state.imgBase64 = res.replace("data:image/png;base64,", "")    updateStoreObjItem("applyCardInfo.signBase64", state.imgBase64)    emit("callback", true)  } catch (error) {    showModal(error, "failBtn")    state.imgBase64 = ''  }}const esignReset = () => {  // 清屏  vueEsignRef.value.reset()}</script><style lang="less" scoped>section{  width: 85%;  height: 580px;  margin: 0 auto;  background: linear-gradient(#FAFAFB 10%, #CBD1D6 100%);  border-radius: 12px;  p{    padding-top: 2%;    font-size: 30px;    color: #000;    text-align: center;  }  canvas{    display: block;    margin: 0 auto;    border: solid 1px #ccc;  }  .btnArea{    display: flex;    margin-top: 2%;    justify-content: space-evenly;  }}</style>