| 提交 | 用户 | 时间 | ||
| 268beb | 1 | <template> |
| W | 2 | <div class="icon-dialog"> |
| 3 | <el-dialog | |
| 4 | v-bind="$attrs" | |
| 5 | width="980px" | |
| 6 | :modal-append-to-body="false" | |
| 7 | v-on="$listeners" | |
| 8 | @open="onOpen" | |
| 9 | @close="onClose" | |
| 10 | > | |
| 11 | <div slot="title"> | |
| 12 | 选择图标 | |
| 13 | <el-input | |
| 14 | v-model="key" | |
| 15 | size="mini" | |
| 16 | :style="{width: '260px'}" | |
| 17 | placeholder="请输入图标名称" | |
| 18 | prefix-icon="el-icon-search" | |
| 19 | clearable | |
| 20 | /> | |
| 21 | </div> | |
| 22 | <ul class="icon-ul"> | |
| 23 | <li | |
| 24 | v-for="icon in iconList" | |
| 25 | :key="icon" | |
| 26 | :class="active===icon?'active-item':''" | |
| 27 | @click="onSelect(icon)" | |
| 28 | > | |
| 29 | <i :class="icon" /> | |
| 30 | <div>{{ icon }}</div> | |
| 31 | </li> | |
| 32 | </ul> | |
| 33 | </el-dialog> | |
| 34 | </div> | |
| 35 | </template> | |
| 36 | <script> | |
| 37 | import iconList from '@/utils/generator/icon.json' | |
| 38 | ||
| 39 | const originList = iconList.map(name => `el-icon-${name}`) | |
| 40 | ||
| 41 | export default { | |
| 42 | inheritAttrs: false, | |
| 43 | props: ['current'], | |
| 44 | data() { | |
| 45 | return { | |
| 46 | iconList: originList, | |
| 47 | active: null, | |
| 48 | key: '' | |
| 49 | } | |
| 50 | }, | |
| 51 | watch: { | |
| 52 | key(val) { | |
| 53 | if (val) { | |
| 54 | this.iconList = originList.filter(name => name.indexOf(val) > -1) | |
| 55 | } else { | |
| 56 | this.iconList = originList | |
| 57 | } | |
| 58 | } | |
| 59 | }, | |
| 60 | methods: { | |
| 61 | onOpen() { | |
| 62 | this.active = this.current | |
| 63 | this.key = '' | |
| 64 | }, | |
| 65 | onClose() {}, | |
| 66 | onSelect(icon) { | |
| 67 | this.active = icon | |
| 68 | this.$emit('select', icon) | |
| 69 | this.$emit('update:visible', false) | |
| 70 | } | |
| 71 | } | |
| 72 | } | |
| 73 | </script> | |
| 74 | <style lang="scss" scoped> | |
| 75 | .icon-ul { | |
| 76 | margin: 0; | |
| 77 | padding: 0; | |
| 78 | font-size: 0; | |
| 79 | li { | |
| 80 | list-style-type: none; | |
| 81 | text-align: center; | |
| 82 | font-size: 14px; | |
| 83 | display: inline-block; | |
| 84 | width: 16.66%; | |
| 85 | box-sizing: border-box; | |
| 86 | height: 108px; | |
| 87 | padding: 15px 6px 6px 6px; | |
| 88 | cursor: pointer; | |
| 89 | overflow: hidden; | |
| 90 | &:hover { | |
| 91 | background: #f2f2f2; | |
| 92 | } | |
| 93 | &.active-item{ | |
| 94 | background: #e1f3fb; | |
| 95 | color: #7a6df0 | |
| 96 | } | |
| 97 | > i { | |
| 98 | font-size: 30px; | |
| 99 | line-height: 50px; | |
| 100 | } | |
| 101 | } | |
| 102 | } | |
| 103 | .icon-dialog { | |
| 104 | ::v-deep .el-dialog { | |
| 105 | border-radius: 8px; | |
| 106 | margin-bottom: 0; | |
| 107 | margin-top: 4vh !important; | |
| 108 | display: flex; | |
| 109 | flex-direction: column; | |
| 110 | max-height: 92vh; | |
| 111 | overflow: hidden; | |
| 112 | box-sizing: border-box; | |
| 113 | .el-dialog__header { | |
| 114 | padding-top: 14px; | |
| 115 | } | |
| 116 | .el-dialog__body { | |
| 117 | margin: 0 20px 20px 20px; | |
| 118 | padding: 0; | |
| 119 | overflow: auto; | |
| 120 | } | |
| 121 | } | |
| 122 | } | |
| 123 | </style> | |
