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.
68 lines
1.6 KiB
68 lines
1.6 KiB
<!-- @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>
|
|
|