parent
cfce89be7d
commit
4eea8cdbb0
@ -1,68 +1,68 @@ |
||||
<!-- @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> |
||||
<!-- @author zhengjie --> |
||||
<template> |
||||
<div class="icon-body"> |
||||
<el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="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> |
||||
|
Loading…
Reference in new issue