electron 自定义窗体拖拽功能

问题

在写好窗口后发现不能拖拽，这个时候就需要我们自行去设置一个拖拽功能

分析

• index.vue

<template><div class="login-panel"><div class="titlt drag">WeChat</div><div class="login-form"><div class="error-msg">{{ errorMsg }}</div><el-form ref="formDataRef" :model="formData" label-width="0px"><el-form-item prop="email"><el-input v-model.trim="formData.email" clearable size="large" placeholder="请输入邮箱"><template #prefix><span class="iconfont icon-email"></span></template></el-input></el-form-item><el-form-item prop="password"><el-input v-model.trim="formData.password" show-password clearable size="large" placeholder="请输入密码"><template #prefix><span class="iconfont icon-password"></span></template></el-input></el-form-item><el-form-item prop="checkcode"><el-input v-model.trim="formData.checkcode" clearable size="large" placeholder="请输入密码"><template #prefix><span class="iconfont icon-checkcode"></span></template></el-input></el-form-item><el-form-item ><el-button type="primary" class="login-btn" @click="handleLogin">登录</el-button></el-form-item><div class="bottom-link"><div class="a-link">没有账号?</div></div></el-form></div></div>
</template><script setup>
import { ref } from 'vue'
const errorMsg = ref('这里是错误信息')
const formDataRef = ref()
const formData = ref({email: '',password: '',checkcode: ''
})
const handleLogin = () => {}
</script><style scoped>
.logading-panel {height: calc(100vh-32px);display: flex;justify-content: center;align-items: center;overflow: hidden;img {width: 300px;}
}.login-panel {background-color: #fff;border-radius: 3px;border: 1px solid #ddd;margin: 0 auto;padding: 5px;
}
.login-form{padding: 15px;}.title {height: 30px;}
.login-btn{width: 100%;
}
.bottom-link{display: flex;justify-content: end;
}
</style>

• 全局css

.drag {/* 设置该属性表明这是可拖拽区域，用来移动窗口 */-webkit-app-region: drag;
}.no-drag {-webkit-app-region: no-drag;
}