<!-- @author zhengjie -->
<template>
<div class="icon-body" style="width:280px;">
<el-input v-model="name" style="position: relative;border:solid #eee thin;" clearable placeholder=""
@clear="filterIcons" @input.native="filterIcons">
<i slot="suffix" class="el-icon-search el-input__icon" />
</el-input>
<div>
<div height="20" style="width: 100%" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
<!-- <svg-icon :icon-class="item" style="height: 30px;width: 16px;" /> -->
<!-- <span>{{ item }}</span> -->
<el-row>
<el-col :span="24"> <span>{{ item }}</span></el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import icons from './requireIcons'
export default {
name: 'IconSelect',
data() {
return {
name: '',
iconList: ['Epi-G-400-TO', 'Epi-L-400-TO', 'Epi-R-400-TO', 'Epi-P-400-TO', 'Epi-U-400-TO']
}
},
created(){
console.log(JSON.stringify(icons),123)
},
methods: {
filterIcons() {
this.iconList = ['Epi-G-400-TO', 'Epi-L-400-TO', 'Epi-R-400-TO', 'Epi-P-400-TO', 'Epi-U-400-TO']
if (this.name) {
this.iconList = this.iconList.filter(item => item.includes(this.name))
}
},
selectedIcon(name) {
this.$emit('selected', name)
document.body.click()
},
reset01() {
this.name = ''
this.iconList = ['Epi-G-400-TO', 'Epi-L-400-TO', 'Epi-R-400-TO', 'Epi-P-400-TO', 'Epi-U-400-TO']
}
}
}
</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>