Tauri应用开发（三）：自定义拖拽区域

1. 自定义拖拽：`data-tauri-drag-region`

tauri默认的顶部可拖拽，有时候我们不需要这个拖拽，或者需要自定义拖拽区域时，就需要通过tauri提供的data-tauri-drag-region属性来自定义拖拽区。
![在这里插入图片描述](https://img-blog.csdnimg.cn/de155809350d4f3ba39cc4078b7e593d.png

接下来我们就实现一个美化过后的拖拽区。

2. 定义Header组件

我们定义一个Vue组件，名为Header，添加如下代码，需要注意的，在需要拖拽的区域需要添加属性data-tauri-drag-region，但仅仅添加这个属性是不够的，因为当div嵌套多层时，data-tauri-drag-region是无效的，解决办法是在递归获取所有子元素，添加拖拽属性，相关代码请看下文的第4小结。

<template><div class="box"><div class="header" data-tauri-drag-region><el-page-header :icon="null"><template #title><div @click="$router.push('/')" class="flex-center"><el-avatar class="image ml20" src="/vite.svg"/><el-link :underline="false" class="title">你的Logo</el-link></div></template><template #content><el-row><el-col :span="10" none-drag-region><div style="width: 400px"><el-button icon="house" circle@click="this.$router.push('/')"/><el-button icon="ArrowLeft" circletitle="后退"/><el-button icon="ArrowRight" circletitle="前进"/><el-button icon="refresh" circle title="刷新"/><el-button icon="setting" circletitle="设置"/></div></el-col><el-col :span="12" none-drag-region><el-input prefix-icon="search"placeholder="搜索一下"/></el-col></el-row></template><template #extra><div class="flex-center"><el-avatar :size="30" class="" src="/vite.svg"/><div none-drag-region><el-button type="" class="mr20">用户名</el-button></div><div none-drag-region class="flex"><el-button icon="FullScreen" circle/><el-button icon="minus" circle/><el-button icon="close" circleclass="mr10"/></div></div></template></el-page-header></div></div>
</template><script>export default {name: '',
}
</script><style>
</style>
<style scoped lang="scss">
.box {height: 60px;position: relative;user-select: none;background: var(--theme-color-primary, linear-gradient(135deg, #43CBFF 10%, #9708CC 100%));
}.header {position: absolute;top: 50%;transform: translate(0, -50%);width: 100%;z-index: 1;.title {width: 73px;color: var(--theme-color-header-text, #ffffff);}.el-button {background: transparent;color: var(--theme-color-header-text, #ffffff);border: none;}:deep(.el-badge__content) {top: 3px;border: none;scale: 0.9;}:deep(.el-input__wrapper) {background: transparent;box-shadow: none;--el-input-text-color: var(--theme-color-header-text, #FFFFFF);--el-input-placeholder-color: var(--theme-color-header-placeholder, #FFFFFF);border: rgba(0, 0, 0, .05) solid 1px;color: white;}
}.image {background: transparent;
}</style>

在这里插入图片描述

3. 关闭tauri默认的顶部栏

由于默认的顶部栏是开启的，所以需要手动关闭。

在tauri.conf.json配置文件中，启用window相关的所有配置（设置"all": true），并找到windows配置项，添加decorations:false即可。具体配置项请参考官方文档：https://tauri.app/v1/api/config

"tauri": {"allowList": {..."window": {"all": true}}..."windows": [{"decorations": false,...}]
}

在这里插入图片描述

4. 添加拖拽功能

上文提到：data-tauri-drag-region在多层级的div下是不生效的，所以我们通过递归的方式为每个子元素设置data-tauri-drag-region属性。并在不需要拖拽的元素上添加none-drag-region属性。

<script setup>
import {onMounted, getCurrentInstance} from 'vue'const {proxy} = getCurrentInstance();const loadTree = (parent, excludeClassNames, callback) => {if (parent.getAttributeNames().includes(...excludeClassNames)) {return;}for (let i = 0; i < parent.children.length; i++) {let child = parent.children[i];loadTree(child, excludeClassNames, callback);}if (callback) {callback(parent);}
}onMounted(() => {loadTree(proxy.$el, ['none-drag-region'], (ele) => {ele.setAttribute("data-tauri-drag-region", "")})
})
</script>