122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template>
|
|
<el-popover
|
|
ref="popover"
|
|
placement="bottom-start"
|
|
popper-class="al-icon-picker-popper"
|
|
width="400"
|
|
trigger="click"
|
|
@show="showPopover"
|
|
@hide="hidePopover"
|
|
>
|
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
|
<el-tab-pane label="本地" name="first" >
|
|
<icon-list ref="local" :icon-list="iconList" @select="select"></icon-list>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="iconfont" name="second">
|
|
<icon-list ref="iconfont" :icon-list="iconfontList" @select="select"></icon-list>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div slot="reference" :class="{'al-icon-picker': true, 'al-icon-picker-open': pickerOpen}"
|
|
@mouseenter="hovering = true"
|
|
@mouseleave="hovering = false">
|
|
<el-input
|
|
type="text"
|
|
clearable
|
|
readonly
|
|
v-model="currentValue"
|
|
placeholder="请选择图标"
|
|
>
|
|
<span slot="prefix" class="el-input__prefix-inner">
|
|
<svg-icon :icon-class="currentValue"></svg-icon>
|
|
</span>
|
|
<span slot="suffix" class="el-input__suffix-inner">
|
|
<i v-if="hovering && currentValue.length > 0"
|
|
class="el-input__icon el-icon-circle-close el-input__clear"
|
|
@mousedown.prevent
|
|
@click.stop.prevent="handleClear"
|
|
></i>
|
|
<i v-else class="el-select__caret el-input__icon el-icon-arrow-down"></i>
|
|
</span>
|
|
</el-input>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script>
|
|
import icons from './requireIcons'
|
|
import {iconFonts} from '@/components/Icon/Icon'
|
|
import IconList from "@/components/select/iconList";
|
|
|
|
export default {
|
|
name: 'IconSelect',
|
|
components: {IconList},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
iconList: icons,
|
|
iconfontList: iconFonts.list,
|
|
currentValue: this.value,
|
|
hasValue: true,
|
|
pickerOpen: false,
|
|
hovering: false,
|
|
activeName: 'first'
|
|
}
|
|
},
|
|
watch: {
|
|
value(val){
|
|
this.currentValue = val
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
showPopover() {
|
|
this.pickerOpen = true
|
|
},
|
|
hidePopover() {
|
|
this.pickerOpen = false
|
|
},
|
|
select(icon){
|
|
this.currentValue = icon
|
|
this.$emit('input', icon)
|
|
this.$refs.popover.doClose()
|
|
},
|
|
handleClear() {
|
|
this.currentValue = ''
|
|
this.$emit('input', '')
|
|
},
|
|
handleTabClick() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.al-icon-picker {
|
|
>>> .el-input:not(.is-disabled) {
|
|
cursor: pointer;
|
|
.el-input__inner {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
>>> .el-input__suffix {
|
|
.el-icon-arrow-down {
|
|
transition: transform .3s;
|
|
}
|
|
}
|
|
}
|
|
.al-icon-picker-open {
|
|
>>> .el-input__suffix {
|
|
.el-icon-arrow-down {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|