优化刷新和设置按钮

This commit is contained in:
xu_yanfeng
2024-01-23 22:25:32 +08:00
parent f590a8f702
commit 32698a8c5f
6 changed files with 74 additions and 179 deletions

View File

@@ -1,49 +0,0 @@
<template>
<div
class="ui-divider"
:class="{ 'ui-divider-move': isMove }"
@mousedown="onDividerMouseDown"
></div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "ui-divider",
emits: ["move"],
setup(props, { emit }) {
const isMove = ref(false);
function onDividerMove(event: MouseEvent) {
emit("move", event);
}
return {
isMove,
onDividerMouseDown(event: MouseEvent) {
isMove.value = true;
document.addEventListener("mousemove", onDividerMove);
function onMouseUp() {
isMove.value = false;
document.removeEventListener("mouseup", onMouseUp);
document.removeEventListener("mousemove", onDividerMove);
}
document.addEventListener("mouseup", onMouseUp);
},
};
},
});
</script>
<style scoped lang="less">
.ui-divider {
width: 3px;
height: 100%;
cursor: ew-resize;
background-color: grey;
}
.ui-divider-move {
background-color: #eaa530;
}
</style>