<template>
|
<div>
|
<el-input :width="width" :class="inputClass" :style="inputStyle" :clearable="true" :value="value"
|
:disabled="disabled" :placeholder="placeholder" type="text" :size="size" @clear="clearValue" @focus="handleFocus">
|
<span slot="append" v-html="svgHtml"></span>
|
</el-input>
|
<el-dialog v-dialogDrag
|
v-dialog-resize
|
title="请选择图标"
|
:visible.sync="visible"
|
width="90%"
|
:append-to-body="true"
|
class="avue-dialog avue-dialog--top"
|
@close="dialogClose">
|
<div style="display: flex;justify-content: space-between;flex-wrap: wrap">
|
<div class="tag-group">
|
<span class="tag-group__title">分类</span>
|
<el-tag
|
v-for="item in types"
|
:key="item"
|
:type="checkedTypes.includes(item)?'success':'info'" size="small"
|
effect="plain" @click="changeType(item)">
|
{{ item }}
|
</el-tag>
|
</div>
|
<avue-input v-model="searchText" @change="handleSearch" placeholder="查询" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input>
|
</div>
|
<div style="height: 60vh">
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
<el-tab-pane v-for="item in iconList" :label="item.label" :name="item.label">
|
<div class="iconList">
|
<div class="iconItem" v-for="svg in item.list" :data-value="svg.name" @click="checkSvg(svg,item.type)">
|
<div v-html="svg.svg"></div>
|
<span>{{svg.name.split(':')[1]}}</span>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {validatenull} from "@/util/validate";
|
import {getStore} from "@/util/store";
|
import func from "@/util/func";
|
import store from "@/store";
|
import {getIcons} from "@/api/UI/Icons";
|
|
export default {
|
name: "input-icon",
|
props: {
|
value: {
|
type: String,
|
default: ''
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
width: {
|
type: String,
|
default:'100%'
|
},
|
size: {
|
type: String,
|
default:'small'
|
},
|
inputClass:{
|
type: String,
|
default:''
|
},
|
inputStyle:{
|
type: String,
|
default:''
|
}
|
},
|
data(){
|
return {
|
visible: false,
|
types: ['标签一' , '标签二' , '标签三' , '标签四','标签五' ],
|
checkedTypes:[],
|
searchText:'',
|
activeName:'',
|
svgHtml:'',
|
allIconList:[],
|
iconList:[]
|
}
|
},
|
watch:{
|
value:{
|
handler(val) {
|
this.svgHtml=func.getSVGByName(val);
|
}
|
}
|
},
|
created(){
|
if (!validatenull(this.$store.state.icons)) {
|
this.iconList = this.$store.state.icons;
|
} else {
|
this.iconList = getStore({ name:'icons'});
|
}
|
this.allIconList=this.iconList;
|
if(this.iconList && this.iconList.length>0){
|
this.activeName=this.iconList[0].label;
|
}else {
|
/*getIcons().then(res => {
|
this.iconList=res.data.data;
|
this.allIconList=this.iconList;
|
store.dispatch("setIcons", this.iconList);
|
if(this.iconList&&this.iconList.length>0) {
|
this.activeName=this.iconList[0].label;
|
}
|
})*/
|
}
|
},
|
methods:{
|
dialogClose() {
|
this.visible = false;
|
},
|
handleFocus() {
|
if (!this.disabled) {
|
if(this.iconList&&this.iconList.length>0) {
|
this.activeName=this.iconList[0].label;
|
}else {
|
if (!validatenull(this.$store.state.icons)) {
|
this.iconList = this.$store.state.icons;
|
} else {
|
this.iconList = getStore({ name:'icons'});
|
}
|
this.allIconList=this.iconList;
|
if(this.iconList && this.iconList.length>0){
|
this.activeName=this.iconList[0].label;
|
}else {
|
/*getIcons().then(res => {
|
this.iconList=res.data.data;
|
this.allIconList=this.iconList;
|
store.dispatch("setIcons", this.iconList);
|
if(this.iconList&&this.iconList.length>0) {
|
this.activeName=this.iconList[0].label;
|
}
|
})*/
|
}
|
}
|
this.visible = true;
|
}
|
},
|
//选择类型查询
|
changeType(type){
|
if(this.checkedTypes.includes(type)){
|
this.checkedTypes=this.checkedTypes.filter(item=> item!=type)
|
}else {
|
this.checkedTypes.push(type)
|
}
|
//按照分类过滤图标
|
if(this.checkedTypes.length==0){
|
this.iconList=this.allIconList
|
}else{
|
this.iconList=this.allIconList.filter(item=> {
|
return this.checkedTypes.includes(item.type);
|
})
|
}
|
this.activeName=this.iconList[0].label;
|
},
|
handleTabClick(tab, event){
|
|
},
|
handleSearch(data){
|
if(data.value==''){
|
this.iconList=this.allIconList;
|
}
|
let iconList=[]
|
this.allIconList.forEach(item=> {
|
iconList.push({
|
label:item.label,
|
type:item.type,
|
list: item.list.filter(iconItem=>{
|
return iconItem.name.replace(item.label,'').indexOf(data.value)!=-1;
|
})
|
})
|
})
|
this.iconList=iconList;
|
},
|
clearValue(){
|
this.svgHtml='';
|
this.$emit('input','')
|
},
|
checkSvg(item){
|
this.svgHtml=item.svg;
|
this.$emit('input',item.name)
|
this.dialogClose();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tag-group{font-size: 14px;}
|
.el-tag{
|
margin: 0 0 10px 10px;
|
cursor: pointer;
|
}
|
.iconList{
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.iconList .iconItem{
|
width: 65px;
|
margin: 6px;
|
text-align: center;
|
}
|
.iconList .iconItem div:hover{
|
transform: scale(1.5);
|
}
|
.iconList .iconItem span{
|
font-size: 12px;
|
}
|
</style>
|
