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

RuoYi

2023-11-30 0b124ef12b8c36c117302991c359d5a745304dfd

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

 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 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 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() {