134 lines
4.3 KiB
Vue
134 lines
4.3 KiB
Vue
<template>
|
|
<el-dialog title="图标选择" :visible.sync="visible" width="800px" :close-on-click-modal="false" :modal="false">
|
|
<el-tabs v-model="activeKey" tab-position="left" size="small" @tab-click="activeChange">
|
|
<el-tab-pane v-for="item in iconData" :key="item.key" :label="item.name" :name="item.key" class="pl25">
|
|
<div v-if="item.iconItem.length > 1" class="xn-icon-select-radio">
|
|
<el-radio-group v-model="iconItemDefault" @change="radioGroupChange" size="small">
|
|
<el-radio v-for="iconItem in item.iconItem" :key="iconItem.key" :label="iconItem.key" border>
|
|
{{ iconItem.name }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div :key="iconItemIns.key" v-for="iconItemIns in item.iconItem">
|
|
<div v-show="iconItemIns.key === iconItemDefault" class="xn-icon-select-list">
|
|
<ul style="white-space: normal">
|
|
<li v-for="icon in iconItemIns.item" :key="icon" :class="icon === value ? 'active' : ''" @click="selectIcon(icon)">
|
|
<div :id="icon" @mouseover="iconInfo = icon">
|
|
<el-image :src="'/assets/platform/img/svg/' + icon + '.svg'" alt="" class="xn-icons">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "index",
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
iconData: [],
|
|
activeKey: "default",
|
|
iconItemDefault: "default",
|
|
iconInfo: null
|
|
}
|
|
},
|
|
methods: {
|
|
activeChange(val) {},
|
|
|
|
radioGroupChange(e) {
|
|
console.log(e)
|
|
},
|
|
|
|
//打开
|
|
showIconModal() {
|
|
this.visible = true
|
|
},
|
|
|
|
defaultSetting(value) {
|
|
if (value) {
|
|
this.value = value
|
|
// 判断展开哪个
|
|
if (value.indexOf("-outlined") > -1 || value.indexOf("-filled") > -1 || value.indexOf("-two-tone") > -1) {
|
|
this.activeKey = "default"
|
|
if (value.indexOf("-two-tone") > -1) {
|
|
this.iconItemDefault = "twotone"
|
|
} else if (value.indexOf("-filled") > -1) {
|
|
this.iconItemDefault = "filled"
|
|
}
|
|
} else if (value.indexOf("-extend") > -1) {
|
|
// 扩展列表
|
|
this.activeKey = "extend"
|
|
// 如扩展其他顶部单选的情况，默认选中在这里配置,同时这里需要做判断
|
|
// this.iconItemDefault = '您的json中配置的'
|
|
}
|
|
}
|
|
},
|
|
|
|
// 选择图标后关闭并返回
|
|
selectIcon(icon) {
|
|
this.visible = false
|
|
this.$emit("input", icon)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.iconData.push(...window.iconSelectConfig.icons)
|
|
},
|
|
created() {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.xn-icon-select-radio {
|
|
padding-left: 5px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.xn-icons {
|
|
/*font-size: 26px;*/
|
|
/*width: 100%;*/
|
|
/*height: 100%;*/
|
|
height: 26px;
|
|
width: 26px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.xn-icon-select-list {
|
|
height: 360px;
|
|
overflow: auto;
|
|
}
|
|
.xn-icon-select-list ul li {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
padding: 18px;
|
|
margin: 5px;
|
|
border-radius: 2px;
|
|
vertical-align: top;
|
|
box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.06);
|
|
transition: all 0.1s;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.xn-icon-select-list ul li:hover,
|
|
.xn-icon-select-list ul li.active {
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
background-color: var(--color-primary);
|
|
}
|
|
</style>
|