问题:签名所在的组件已经销毁了,但是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>