|
|
@ -1,9 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="dropdown" ref="dropdownRef"> |
|
|
<div class="dropdown" ref="dropdownRef"> |
|
|
<!-- 下拉框触发器 --> |
|
|
<!-- 下拉框触发器 --> |
|
|
<div class="dropdown-toggle" @click="toggleMenu" :class="{ 'active': isOpen }"> |
|
|
|
|
|
|
|
|
<div class="dropdown-toggle" @click="toggleMenu" :class="{ 'active': isOpen,'disabled': props.disabled }"> |
|
|
<div class="search"> |
|
|
<div class="search"> |
|
|
<input type="text" class="search-input" :placeholder="placeholder" :value="isOpen ? searchData : selectedItem" |
|
|
|
|
|
|
|
|
<input type="text" class="search-input" :placeholder="placeholder" :value="isOpen ? searchData : selectedItem" |
|
|
@focus="handleSearchFocus" @blur="handleSearchBlur" @input="handleInput"> |
|
|
@focus="handleSearchFocus" @blur="handleSearchBlur" @input="handleInput"> |
|
|
<el-icon class="clear-icon" v-if="searchData" @click="clearSearch"> |
|
|
<el-icon class="clear-icon" v-if="searchData" @click="clearSearch"> |
|
|
<CircleClose /> |
|
|
<CircleClose /> |
|
|
@ -50,6 +50,10 @@ const props = defineProps({ |
|
|
modelValue: { |
|
|
modelValue: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '' |
|
|
default: '' |
|
|
|
|
|
}, |
|
|
|
|
|
disabled: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: false |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
@ -57,6 +61,7 @@ const emit = defineEmits(['update:modelValue', 'change']) |
|
|
|
|
|
|
|
|
// 切换下拉菜单 |
|
|
// 切换下拉菜单 |
|
|
const toggleMenu = () => { |
|
|
const toggleMenu = () => { |
|
|
|
|
|
if (props.disabled) return |
|
|
isOpen.value = !isOpen.value |
|
|
isOpen.value = !isOpen.value |
|
|
searchData.value = '' |
|
|
searchData.value = '' |
|
|
} |
|
|
} |
|
|
|