画布增加的新功能

src/component/Canvas/CanvasEditor/components/tools/MySelect.vue

@@ -0,0 +1,66 @@
+<template>
+	<a-select
+		class="my-select"
+		:size="size"
+		@change="change"
+		:defaultValue="defaultValue"
+		@dropdownVisibleChange="dropdownVisibleChange"
+	>
+		<a-select-option
+			v-for="v in list"
+			:key="v.value"
+			:value="v.value"
+			:title="v.tip"
+			@mouseover.stop.prevent="mouseover(v)"
+			@mouseleave="mouseleave(v)"
+			>{{ v.label }}</a-select-option
+		>
+	</a-select>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	const props = defineProps({
+		defaultValue: {
+			default: "",
+		},
+		list: {
+			type: Array,
+			default: () => [],
+		},
+		size: {
+			type: String,
+			default: "small",
+		},
+	});
+	const emit = defineEmits(["change", "active"]);
+	const isChange = ref(false);
+	const initValue = ref(props.defaultValue);
+	const activeValue = ref(props.defaultValue);
+	const timeout = ref(null);
+	const mouseover = (v) => {
+		clearTimeout(timeout.value);
+		if (v.value === activeValue.value) return;
+		emit("active", v.value, activeValue.value);
+		activeValue.value = v.value;
+	};
+	const mouseleave = () => {
+		clearTimeout(timeout.value);
+		timeout.value = setTimeout(() => {
+			dropdownVisibleChange(false);
+		}, 100);
+	};
+	const change = (v) => {
+		isChange.value = true;
+		emit("change", v, initValue.value);
+	};
+	const dropdownVisibleChange = (v) => {
+		if (v) {
+			isChange.value = false;
+			initValue.value = props.defaultValue;
+		} else if (!isChange.value) {
+			emit("active", initValue.value, activeValue.value);
+			activeValue.value = initValue.value;
+		}
+	};
+</script>