优化菜单图标选择后点击其他区域闪烁问题

master
RuoYi 10 months ago
parent 9e1616b075
commit 0b124ef12b
  1. 16
      src/views/system/menu/index.vue

@ -113,12 +113,10 @@
<el-popover <el-popover
placement="bottom-start" placement="bottom-start"
:width="540" :width="540"
v-model:visible="showChooseIcon"
trigger="click" trigger="click"
@show="showSelectIcon"
> >
<template #reference> <template #reference>
<el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" v-click-outside="hideSelectIcon" readonly> <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
<template #prefix> <template #prefix>
<svg-icon <svg-icon
v-if="form.icon" v-if="form.icon"
@ -281,7 +279,6 @@
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"; import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon"; import SvgIcon from "@/components/SvgIcon";
import IconSelect from "@/components/IconSelect"; import IconSelect from "@/components/IconSelect";
import { ClickOutside as vClickOutside } from 'element-plus'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable"); const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
@ -294,7 +291,6 @@ const title = ref("");
const menuOptions = ref([]); const menuOptions = ref([]);
const isExpandAll = ref(false); const isExpandAll = ref(false);
const refreshTable = ref(true); const refreshTable = ref(true);
const showChooseIcon = ref(false);
const iconSelectRef = ref(null); const iconSelectRef = ref(null);
const data = reactive({ const data = reactive({
@ -353,20 +349,10 @@ function reset() {
/** 展示下拉图标 */ /** 展示下拉图标 */
function showSelectIcon() { function showSelectIcon() {
iconSelectRef.value.reset(); iconSelectRef.value.reset();
showChooseIcon.value = true;
} }
/** 选择图标 */ /** 选择图标 */
function selected(name) { function selected(name) {
form.value.icon = name; form.value.icon = name;
showChooseIcon.value = false;
}
/** 图标外层点击隐藏下拉列表 */
function hideSelectIcon(event) {
var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget;
var className = elem.className;
if (className !== "el-input__inner") {
showChooseIcon.value = false;
}
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
function handleQuery() { function handleQuery() {

Loading…
Cancel
Save