index.vue 2.5 KB
Newer Older
也曾为你像超人's avatar
也曾为你像超人 已提交
1 2 3
<!-- @author zhengjie -->
<template>
  <div class="icon-body">
4
    <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
也曾为你像超人's avatar
也曾为你像超人 已提交
5 6 7
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list">
也曾为你像超人's avatar
也曾为你像超人 已提交
8 9 10 11 12
      <div class="list-container">
        <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">
          <div :class="['icon-item', { active: activeIcon === item }]">
            <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>
            <span>{{ item }}</span>
13 14
          </div>
        </div>
也曾为你像超人's avatar
也曾为你像超人 已提交
15
      </div>
也曾为你像超人's avatar
也曾为你像超人 已提交
16 17 18 19 20 21 22 23
    </div>
  </div>
</template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
24 25 26 27 28
  props: {
    activeIcon: {
      type: String
    }
  },
也曾为你像超人's avatar
也曾为你像超人 已提交
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
  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;
58 59 60 61
    .icon-search {
      position: relative;
      margin-bottom: 5px;
    }
也曾为你像超人's avatar
也曾为你像超人 已提交
62 63
    .icon-list {
      height: 200px;
也曾为你像超人's avatar
也曾为你像超人 已提交
64
      overflow: auto;
65 66 67 68 69
      .list-container {
        display: flex;
        flex-wrap: wrap;
        .icon-item-wrapper {
          width: calc(100% / 3);
也曾为你像超人's avatar
也曾为你像超人 已提交
70 71
          height: 25px;
          line-height: 25px;
72 73 74 75 76 77
          cursor: pointer;
          display: flex;
          .icon-item {
            display: flex;
            max-width: 100%;
            height: 100%;
也曾为你像超人's avatar
也曾为你像超人 已提交
78
            padding: 0 5px;
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
            &:hover {
              background: #ececec;
              border-radius: 5px;
            }
            .icon {
              flex-shrink: 0;
            }
            span {
              display: inline-block;
              vertical-align: -0.15em;
              fill: currentColor;
              padding-left: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .icon-item.active {
            background: #ececec;
            border-radius: 5px;
          }
        }
也曾为你像超人's avatar
也曾为你像超人 已提交
101 102 103 104
      }
    }
  }
</style>