You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.5 KiB
123 lines
2.5 KiB
<template> |
|
<div class="icon-dialog"> |
|
<el-dialog |
|
v-bind="$attrs" |
|
width="980px" |
|
:modal-append-to-body="false" |
|
v-on="$listeners" |
|
@open="onOpen" |
|
@close="onClose" |
|
> |
|
<div slot="title"> |
|
选择图标 |
|
<el-input |
|
v-model="key" |
|
size="mini" |
|
:style="{width: '260px'}" |
|
placeholder="请输入图标名称" |
|
prefix-icon="el-icon-search" |
|
clearable |
|
/> |
|
</div> |
|
<ul class="icon-ul"> |
|
<li |
|
v-for="icon in iconList" |
|
:key="icon" |
|
:class="active===icon?'active-item':''" |
|
@click="onSelect(icon)" |
|
> |
|
<i :class="icon" /> |
|
<div>{{ icon }}</div> |
|
</li> |
|
</ul> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import iconList from '@/utils/generator/icon.json' |
|
|
|
const originList = iconList.map(name => `el-icon-${name}`) |
|
|
|
export default { |
|
inheritAttrs: false, |
|
props: ['current'], |
|
data() { |
|
return { |
|
iconList: originList, |
|
active: null, |
|
key: '' |
|
} |
|
}, |
|
watch: { |
|
key(val) { |
|
if (val) { |
|
this.iconList = originList.filter(name => name.indexOf(val) > -1) |
|
} else { |
|
this.iconList = originList |
|
} |
|
} |
|
}, |
|
methods: { |
|
onOpen() { |
|
this.active = this.current |
|
this.key = '' |
|
}, |
|
onClose() {}, |
|
onSelect(icon) { |
|
this.active = icon |
|
this.$emit('select', icon) |
|
this.$emit('update:visible', false) |
|
} |
|
} |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.icon-ul { |
|
margin: 0; |
|
padding: 0; |
|
font-size: 0; |
|
li { |
|
list-style-type: none; |
|
text-align: center; |
|
font-size: 14px; |
|
display: inline-block; |
|
width: 16.66%; |
|
box-sizing: border-box; |
|
height: 108px; |
|
padding: 15px 6px 6px 6px; |
|
cursor: pointer; |
|
overflow: hidden; |
|
&:hover { |
|
background: #f2f2f2; |
|
} |
|
&.active-item{ |
|
background: #e1f3fb; |
|
color: #7a6df0 |
|
} |
|
> i { |
|
font-size: 30px; |
|
line-height: 50px; |
|
} |
|
} |
|
} |
|
.icon-dialog { |
|
::v-deep .el-dialog { |
|
border-radius: 8px; |
|
margin-bottom: 0; |
|
margin-top: 4vh !important; |
|
display: flex; |
|
flex-direction: column; |
|
max-height: 92vh; |
|
overflow: hidden; |
|
box-sizing: border-box; |
|
.el-dialog__header { |
|
padding-top: 14px; |
|
} |
|
.el-dialog__body { |
|
margin: 0 20px 20px 20px; |
|
padding: 0; |
|
overflow: auto; |
|
} |
|
} |
|
} |
|
</style>
|
|
|