tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 图标选择器组件使用 onClickOutside 未排除下拉弹出框元素导致无法输入搜索

Browse Source 
Former-commit-id: 916bcd14e37c4950210f84bc5ab9725317b34540
This commit is contained in:
郝先瑞
2023-04-25 06:43:23 +08:00
parent 8abf81e266
commit 7853470baa
1 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/IconSelect/index.vue
View File

@@ -11,12 +11,13 @@ const inputValue = toRef(props, "modelValue");
const visible = ref(false); // 弹窗显示状态 const visible = ref(false); // 弹窗显示状态
const iconNames: string[] = []; // 所有的图标名称集合 const allIconNames: string[] = []; // 所有的图标名称集合
const filterValue = ref(""); // 筛选的值 const filterValue = ref(""); // 筛选的值
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合 const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
const iconSelectorRef = ref(null); const iconSelectorRef = ref();
const iconSelectorDialogRef = ref();
/** /**
* icon 加载 * icon 加载
*/ */
@@ -24,9 +25,9 @@ function loadIcons() {
const icons = import.meta.glob("../../assets/icons/*.svg"); const icons = import.meta.glob("../../assets/icons/*.svg");
for (const icon in icons) { for (const icon in icons) {
const iconName = icon.split("assets/icons/")[1].split(".svg")[0]; const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
iconNames.push(iconName); allIconNames.push(iconName);
} }
filterIconNames.value = iconNames; filterIconNames.value = allIconNames;
} }
/** /**
@@ -34,11 +35,11 @@ function loadIcons() {
*/ */
function handleFilter() { function handleFilter() {
if (filterValue.value) { if (filterValue.value) {
filterIconNames.value = iconNames.filter((iconName) => filterIconNames.value = allIconNames.filter((iconName) =>
iconName.includes(filterValue.value) iconName.includes(filterValue.value)
); );
} else { } else {
filterIconNames.value = iconNames; filterIconNames.value = allIconNames;
} }
} }
@@ -53,7 +54,9 @@ function handleSelect(iconName: string) {
/** /**
* 点击容器外的区域关闭弹窗 VueUse onClickOutside * 点击容器外的区域关闭弹窗 VueUse onClickOutside
*/ */
onClickOutside(iconSelectorRef, () => (visible.value = false)); onClickOutside(iconSelectorRef, () => (visible.value = false), {
ignore: [iconSelectorDialogRef],
});
onMounted(() => { onMounted(() => {
loadIcons(); loadIcons();
@@ -91,32 +94,34 @@ onMounted(() => {
</template> </template>
<!-- 下拉选择弹窗 --> <!-- 下拉选择弹窗 -->
<el-input <div ref="iconSelectorDialogRef">
class="p-2" <el-input
v-model="filterValue" class="p-2"
placeholder="搜索图标" v-model="filterValue"
clearable placeholder="搜索图标"
@input="handleFilter" clearable
/> @input="handleFilter"
<el-divider border-style="dashed" /> />
<el-divider border-style="dashed" />
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<ul class="icon-list"> <ul class="icon-list">
<li <li
class="icon-item" class="icon-item"
v-for="(iconName, index) in filterIconNames" v-for="(iconName, index) in filterIconNames"
:key="index" :key="index"
@click="handleSelect(iconName)" @click="handleSelect(iconName)"
> >
<el-tooltip :content="iconName" placement="bottom" effect="light"> <el-tooltip :content="iconName" placement="bottom" effect="light">
<svg-icon <svg-icon
color="var(--el-text-color-regular)" color="var(--el-text-color-regular)"
:icon-class="iconName" :icon-class="iconName"
/> />
</el-tooltip> </el-tooltip>
</li> </li>
</ul> </ul>
</el-scrollbar> </el-scrollbar>
</div>
</el-popover> </el-popover>
</div> </div>
</template> </template>