-webkit-app-region: drag导致其全部子控件鼠标事件失效

项目场景：

项目场景：学习electron vue3 ts element项目中遇到的问题

---

问题描述

vue组件无法触发鼠标事件

<script setup lang="ts">
// import { ipcRenderer } from 'electron';
const ShutOrMin=(v:String)=>{
window.api.ShutOrMin(v)
}
</script>
<template>
        <el-button type="primary" color="#715CFE" id="Shut" @Click="ShutOrMin('m')" ></el-button>
        <el-button type="primary" color="#F9D382" id="Shut" @Click="ShutOrMin('s')" ></el-button>
</template>
<style>
#Shut{
position: relative;
top: 674px;
}
</style>

---

原因分析：

纠结了一晚上才知道的答案…
vue组件与一个div盒子重叠,div盒子设置了 -webkit-app-region: drag 窗口可拖动,导致其所有子控件的鼠标事件失效

---

解决方案：

使用element-plus的组件可以解决问题,或者在div盒子里面再创建一个div盒子,让它附着在vue控件上面,然后设置其-webkit-app-region:no-drag就可以了,还有一种可能导致事件失效就是组件被覆盖在别的组件下面,解决方法:子组件定位设置为posiaction:absolute,父组件设置为posiction:relative