vue3.0 canvas画图窗口页面点击按钮就会刷新页面

问题遇到的现象和发生背景

画图窗口组件在其他页面引入。点击按钮弹出画图窗口，但是点击上面所有的按钮就都会刷新页面，回到原来的页面，画图弹窗消失
项目链接https://gitee.com/zjy9823/test

问题相关代码，请勿粘贴截图

<template>
  <div class="imgDraw">
    <a
      href="javascript:void(0);"
      ref="download"
      download="picture.png"
      v-show="false"
    ></a>
    <el-button type="primary" @click="handleShowCanvas">批改</el-button>
        <el-dialog
          destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
            v-model="show" fullscreen
        >
          <div class="d_body">
            <div class="board" ref="board">
              <canvas
                id="ctx_front"
                ref="ctx_front"
                :style="'cursor:' + cursor"
              ></canvas>
              <canvas
                id="ctx_base"
                ref="ctx_base"
                :style="'cursor:' + cursor"
              ></canvas>
              <canvas
                id="ctx_back"
                ref="ctx_back"
                :style="'cursor:' + cursor"
              ></canvas>
              <input
                name="text"
                id="text"
                @blur="handleTextBlur"
                @keyup.enter="handleTextBlur"
                v-model="text"
        
                autocomplete="off"
                :style="
                  'font-size:' + (this.slide * 10 + 14) + 'px;color:' + defaultColor
                "
              />
            </div>
            <div :class="['tools', 'settings', isExpand ? '' : 'noExpand']">
              <div
                class="tool_item"
                v-for="(item, index) in settings"
                :key="item.icon"
              >
                <button v-if="index == 0">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    :style="'color:' + defaultColor"
                  >
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span :style="'color:' + defaultColor">{{ item.name }}</span>
                  <el-color-picker v-model="defaultColor"></el-color-picker>
                </button>
                <div v-else-if="index == 1" class="slide">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span>{{ item.name }}</span
                  >&emsp;&emsp;
                  <el-slider
                    ref="slide"
                    v-model="slide"
                    :min="1"
                    :max="10"
                    :step="1"
                  ></el-slider>
                </div>
                <button v-else @click.stop="item.fun">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span>{{ item.name }}</span>
                </button>
              </div>
              <div class="tool_item" v-for="item in btns" :key="item.icon">
                <button
                  @click.stop="item.fun"
                  v-if="item.name == '上一步'"
                  :disabled="prevDis"
                  :style="prevDis ? 'cursor:not-allowed' : ''"
                >
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span>{{ item.name }}</span>
                </button>
                <button
                  @click.stop="item.fun"
                  v-else-if="item.name == '下一步'"
                  :disabled="nextDis"
                  :style="nextDis ? 'cursor:not-allowed' : ''"
                >
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span>{{ item.name }}</span>
                </button>
                <button @click.stop="item.fun" v-else>
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <span>{{ item.name }}</span>
                </button>
              </div>
              <div class="tool_item go_up">
                <button @click.stop="handleShowOrHide(0)">
                  <i class="el-icon-caret-top"></i>
                  <span>收起</span>
                </button>
              </div>
              <div class="pull" v-show="!isExpand">
                <span class="line"></span>
                <span
                  class="round"
                  title="展开"
                  @click.stop="handleShowOrHide(1)"
                ></span>
              </div>
            </div>
            <div :class="['tools', 'bars', showTools ? '' : 'hideTools']">
              <div
                class="el-icon-s-tools arrow"
                v-if="!showTools"
                title="展开"
                @click.stop="handleShowTools(1)"
              ></div>
              <div
                class="el-icon-arrow-right arrow"
                v-else
                title="收起"
                @click.stop="handleShowTools(0)"
              ></div>
              <div
                :class="[
                  'tool_item',
                  activeTool == item.toolType ? 'activeTool' : '',
                ]"
                v-for="item in tools"
                :key="item.toolType"
                @click.stop="handleChangeToolType(item.toolType)"
              >
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.icon"></use>
                </svg>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </el-dialog>
  </div>
</template>

运行结果及报错内容

点击上方红色横线任何按钮都会刷新页面，然后弹窗就消失了，又回到未弹出弹窗的页面。这些功能如果直接在页面上显示，都可以实现。就是引入在其他页面后，就会刷新消失。

代码不完整

代码样式没给，本地跑起来页面很乱 点击按钮也没出现你说的关闭弹窗， 估计是你层级问题 或事件穿透

应该时组件中的数据被影响了，然后调用了你的方法

console窗口有相关的报错提示没有 或者
排查一下代码函数的调用逻辑是否出现了问题

点击事件对整个窗口都有效，需要修改下。