72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<a-select
|
|
class="my-select"
|
|
:size="size"
|
|
@change="change"
|
|
:defaultValue="defaultValue"
|
|
@dropdownVisibleChange="dropdownVisibleChange"
|
|
:disabled="disabled"
|
|
>
|
|
<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({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
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>
|