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

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

@ -113,12 +113,10 @@
<el-popover
placement="bottom-start"
:width="540"
v-model:visible="showChooseIcon"
trigger="click"
@show="showSelectIcon"
>
<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>
<svg-icon
v-if="form.icon"
@ -281,7 +279,6 @@
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon";
import IconSelect from "@/components/IconSelect";
import { ClickOutside as vClickOutside } from 'element-plus'
const { proxy } = getCurrentInstance();
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 isExpandAll = ref(false);
const refreshTable = ref(true);
const showChooseIcon = ref(false);
const iconSelectRef = ref(null);
const data = reactive({
@ -353,20 +349,10 @@ function reset() {
/** 展示下拉图标 */
function showSelectIcon() {
iconSelectRef.value.reset();
showChooseIcon.value = true;
}
/** 选择图标 */
function selected(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() {

Loading…
Cancel
Save