songwei
/
fxfast-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化选择图标组件

This commit is contained in:
刘元博 2023-03-18 10:59:05 +08:00
parent cfce89be7d
commit 4eea8cdbb0
2 changed files with 70 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
ruoyi-ui/src/components/IconSelect/index.vue
View File

@ -1,68 +1,68 @@
<!-- @author zhengjie --> <!-- @author zhengjie -->
<template> <template>
<div class="icon-body"> <div class="icon-body">
<el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons"> <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
<i slot="suffix" class="el-icon-search el-input__icon" /> <i slot="suffix" class="el-icon-search el-input__icon" />
</el-input> </el-input>
<div class="icon-list"> <div class="icon-list">
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)"> <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" /> <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
<span>{{ item }}</span> <span>{{ item }}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import icons from './requireIcons' import icons from './requireIcons'
export default { export default {
name: 'IconSelect', name: 'IconSelect',
data() { data() {
return { return {
name: '', name: '',
iconList: icons iconList: icons
} }
}, },
methods: { methods: {
filterIcons() { filterIcons() {
this.iconList = icons this.iconList = icons
if (this.name) { if (this.name) {
this.iconList = this.iconList.filter(item => item.includes(this.name)) this.iconList = this.iconList.filter(item => item.includes(this.name))
} }
}, },
selectedIcon(name) { selectedIcon(name) {
this.$emit('selected', name) this.$emit('selected', name)
document.body.click() document.body.click()
}, },
reset() { reset() {
this.name = '' this.name = ''
this.iconList = icons this.iconList = icons
} }
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.icon-body { .icon-body {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
.icon-list { .icon-list {
height: 200px; height: 200px;
overflow-y: scroll; overflow-y: scroll;
div { div {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-bottom: -5px; margin-bottom: -5px;
cursor: pointer; cursor: pointer;
width: 33%; width: 33%;
float: left; float: left;
} }
span { span {
display: inline-block; display: inline-block;
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
} }
} }
</style> </style>

5
ruoyi-ui/src/views/system/menu/index.vue
View File

@ -77,7 +77,7 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@ -140,8 +140,7 @@
v-if="form.icon" v-if="form.icon"
slot="prefix" slot="prefix"
:icon-class="form.icon" :icon-class="form.icon"
class="el-input__icon" style="width: 25px;"
style="height: 32px;width: 16px;"
/> />
<i v-else slot="prefix" class="el-icon-search el-input__icon" /> <i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input> </el-input>