|
|
|
<style scoped>
|
::-webkit-scrollbar {
|
width: 8px;
|
background-color: #fff;
|
}
|
|
::-webkit-scrollbar-thumb:vertical {
|
background-color: rgba(0, 0, 0, 0.1);
|
-webkit-border-radius: 6px;
|
}
|
|
.icon {
|
width: 488px;
|
height: 350px;
|
padding: 10px;
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
background-color: #fff;
|
}
|
|
.template_label {
|
cursor: pointer;
|
user-select: none;
|
padding: 8px 10px;
|
line-height: 12px;
|
}
|
|
.template_label i,
|
span {
|
font-size: 0.7rem;
|
font-weight: bold;
|
}
|
|
.template_label i {
|
float: right;
|
}
|
|
.template_icon {
|
height: calc(350px - 20px - 63px);
|
padding: 0 9px;
|
overflow-y: auto;
|
display: flex;
|
flex-wrap: wrap;
|
transition: .3s;
|
}
|
|
.template_icon div {
|
width: 40px;
|
height: 40px;
|
cursor: pointer;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 4px;
|
}
|
|
.template_icon div:hover {
|
background-color: rgba(0, 0, 0, 0.03);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
}
|
|
.template_icon div:active {
|
opacity: .7;
|
}
|
|
.template_icon i {
|
font-size: 22px;
|
color: #666;
|
}
|
</style>
|
|
<template>
|
<div class="icon">
|
<el-col>
|
<el-input placeholder="输入关键字查询" size="small" prefix-icon="el-icon-search" v-model="search"
|
style="font-size: 12px;"></el-input>
|
</el-col>
|
<el-col @click.native="shows.mainShow = !shows.mainShow" class="template_label">
|
<span>系统图标</span>
|
<i :class="shows.mainShow?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
|
</el-col>
|
<el-collapse-transition>
|
<el-col class="template_icon" v-show="shows.mainShow">
|
<div v-for="(a, ai) in icons" :key="ai" :title="a.name" v-show="a.name.indexOf(search)>-1"
|
@click="$emit('selectIcon', a)">
|
<i :class="a.class"></i>
|
</div>
|
</el-col>
|
</el-collapse-transition>
|
</div>
|
</template>
|
|
<script>
|
import iconfont from '../../../static/img/alifont/iconfont.json'
|
import elicon from '../../../static/json/icon.json'
|
export default {
|
data() {
|
return {
|
search: '',
|
shows: {
|
mainShow: true
|
},
|
icons: []
|
}
|
},
|
mounted() {
|
if (this.icons.length == 0) {
|
iconfont.glyphs.forEach(a => {
|
this.icons.push({
|
class: 'iconfont ' + iconfont['css_prefix_text'] + a['font_class'],
|
name: a['name']
|
})
|
})
|
elicon.forEach(a =>{
|
this.icons.push({
|
class: a,
|
name: a
|
})
|
})
|
}
|
},
|
}
|
</script>
|
