优化菜单图片选择
This commit is contained in:
不做码农
parent
c2d17ac79e
commit
511f2b43c0
@ -1,14 +1,28 @@
|
||||
<template>
|
||||
<div class="icon-body">
|
||||
<el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
|
||||
<template #suffix><i class="el-icon-search el-input__icon" /></template>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<search />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon" @click="selectedIcon('')">
|
||||
<delete />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="icon-list">
|
||||
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
|
||||
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="svg-icon" name="1">
|
||||
<div class="icon-list">
|
||||
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
|
||||
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -17,6 +31,7 @@ import icons from './requireIcons'
|
||||
|
||||
const iconName = ref('')
|
||||
const iconList = ref(icons)
|
||||
const activeName = ref('1')
|
||||
const emit = defineEmits(['selected'])
|
||||
|
||||
function filterIcons() {
|
||||
|
||||
@ -103,8 +103,8 @@
|
||||
<template #reference>
|
||||
<el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
|
||||
<template #prefix>
|
||||
<svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
|
||||
<el-icon v-else style="height: 32px;width: 16px;">
|
||||
<svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" />
|
||||
<el-icon class="el-input__icon" v-else>
|
||||
<search />
|
||||
</el-icon>
|
||||
</template>
|
||||
@ -117,13 +117,12 @@
|
||||
<el-col :lg="12" v-if="form.menuType != 'F'">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>是否外链
|
||||
</span>
|
||||
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
是否外链
|
||||
</template>
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio label="1">是</el-radio>
|
||||
@ -134,14 +133,12 @@
|
||||
<el-col :lg="12" v-if="form.menuType != 'F'">
|
||||
<el-form-item prop="path">
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
路由地址
|
||||
</span>
|
||||
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
路由地址
|
||||
</template>
|
||||
<el-input v-model="form.path" placeholder="请输入路由地址" />
|
||||
</el-form-item>
|
||||
@ -149,14 +146,13 @@
|
||||
<el-col :lg="12" v-if="form.menuType == 'C'">
|
||||
<el-form-item prop="component">
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
组件路径
|
||||
</span>
|
||||
|
||||
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
组件路径
|
||||
</template>
|
||||
<el-input v-model="form.component" placeholder="请输入组件路径" />
|
||||
</el-form-item>
|
||||
@ -165,14 +161,12 @@
|
||||
<el-form-item>
|
||||
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="控制器中定义的权限字符，如：[ActionPermissionFilter(Permission = 'system:user:delete')])" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
权限字符
|
||||
</span>
|
||||
<el-tooltip content="控制器中定义的权限字符，如：[ActionPermissionFilter(Permission = 'system:user:delete')])" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
权限字符
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -180,29 +174,25 @@
|
||||
<el-form-item>
|
||||
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
|
||||
<!-- <el-icon :size="15"><questionFilled/></el-icon> -->
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
路由参数
|
||||
</span>
|
||||
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
路由参数
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" v-if="form.menuType == 'C'">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
是否缓存
|
||||
</span>
|
||||
|
||||
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
是否缓存
|
||||
</template>
|
||||
<el-radio-group v-model="form.isCache">
|
||||
<el-radio label="0">缓存</el-radio>
|
||||
@ -213,14 +203,13 @@
|
||||
<el-col :lg="12" v-if="form.menuType != 'F'">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
显示状态
|
||||
</span>
|
||||
|
||||
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
显示状态
|
||||
</template>
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio v-for="dict in sys_show_hide" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
|
||||
@ -230,14 +219,12 @@
|
||||
<el-col :lg="12" v-if="form.menuType != 'F'">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
菜单状态
|
||||
</span>
|
||||
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
|
||||
<el-icon :size="15">
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
菜单状态
|
||||
</template>
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user