53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup lang="ts" name="CarSelect">
|
|
import CarTree from './CarTree.vue';
|
|
import { computed, ref } from 'vue';
|
|
const props = defineProps<{
|
|
modelValue: string | undefined;
|
|
}>();
|
|
|
|
const Emits = defineEmits(['update:modelValue', 'confirm', 'cancel']);
|
|
const inputRef = ref();
|
|
const selectCar = computed({
|
|
get: () => {
|
|
// 在每次获取弹窗显示状态时，自动修改宽度
|
|
// changeDialogWidth();
|
|
return props.modelValue;
|
|
},
|
|
set: nv => {
|
|
Emits('update:modelValue', nv);
|
|
}
|
|
});
|
|
|
|
const searchValue = ref(props.modelValue);
|
|
|
|
const popoverRef = ref();
|
|
const changeSearchValue = (value: string) => {
|
|
searchValue.value = value;
|
|
popoverRef.value.hide();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<el-popover
|
|
ref="popoverRef"
|
|
placement="bottom"
|
|
:width="310"
|
|
trigger="click"
|
|
:show-arrow="false"
|
|
>
|
|
<template #reference>
|
|
<el-input
|
|
ref="inputRef"
|
|
v-model="searchValue"
|
|
placeholder="请输入车牌号"
|
|
suffix-icon="Search"
|
|
></el-input>
|
|
</template>
|
|
<CarTree
|
|
v-model="selectCar"
|
|
:plate-number="searchValue"
|
|
@change="changeSearchValue"
|
|
></CarTree>
|
|
</el-popover>
|
|
</template>
|