!676 优化选择图标组件 Merge pull request !676 from 也曾为你像超人/master

若依

2023-04-05 c5ef0336a473bd14baeb1188567de47cad079b7f

!676 优化选择图标组件
Merge pull request !676 from 也曾为你像超人/master

 ruoyi-ui/src/components/IconSelect/index.vue

@@ -1,68 +1,68 @@
<!-- @author zhengjie -->

<template>

  <div class="icon-body">

    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">

      <i slot="suffix" class="el-icon-search el-input__icon" />

    </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>

  </div>

</template>



<script>

import icons from './requireIcons'

export default {

  name: 'IconSelect',

  data() {

    return {

      name: '',

      iconList: icons

    }

  },

  methods: {

    filterIcons() {

      this.iconList = icons

      if (this.name) {

        this.iconList = this.iconList.filter(item => item.includes(this.name))

      }

    },

    selectedIcon(name) {

      this.$emit('selected', name)

      document.body.click()

    },

    reset() {

      this.name = ''

      this.iconList = icons

    }

  }

}

</script>



<style rel="stylesheet/scss" lang="scss" scoped>

  .icon-body {

    width: 100%;

    padding: 10px;

    .icon-list {

      height: 200px;

      overflow-y: scroll;

      div {

        height: 30px;

        line-height: 30px;

        margin-bottom: -5px;

        cursor: pointer;

        width: 33%;

        float: left;

      }

      span {

        display: inline-block;

        vertical-align: -0.15em;

        fill: currentColor;

        overflow: hidden;

      }

    }

  }

</style>

<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </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>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  data() {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
      height: 200px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
</style>

 ruoyi-ui/src/views/system/menu/index.vue

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