clear
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]] Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45 Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee] Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066 Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26 Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996 Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9 Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
@@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-popover
|
||||
ref="pop"
|
||||
v-model="pop"
|
||||
:placement="placement"
|
||||
width="300"
|
||||
trigger="click">
|
||||
<div class="header d2-clearfix d2-mb-10" v-if="clearable">
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
:clearable="true"
|
||||
placeholder="搜索 比如 'plus'"
|
||||
prefix-icon="el-icon-search">
|
||||
</el-input>
|
||||
<el-collapse v-if="!searchMode" class="group" v-model="collapseActive">
|
||||
<el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="class">
|
||||
<el-row class="class-row">
|
||||
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
|
||||
<i :class="'fa fa-' + iconName"></i>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div v-if="searchMode" class="group">
|
||||
<div class="class" v-for="(item, index) in iconFilted" :key="index">
|
||||
<div class="class-title">{{item.title}}</div>
|
||||
<el-row class="class-row">
|
||||
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
|
||||
<i :class="'fa fa-' + iconName"></i>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 允许用户输入 -->
|
||||
<el-input
|
||||
v-if="userInput"
|
||||
v-model="currentValue"
|
||||
v-bind="bind"
|
||||
style="max-width: 240px;">
|
||||
<template v-if="value" slot="prepend">
|
||||
<i :class="'fa fa-' + value"></i>
|
||||
</template>
|
||||
<el-button v-popover:pop slot="append">
|
||||
<i class="fa fa-list"></i>
|
||||
</el-button>
|
||||
</el-input>
|
||||
<!-- 不允许用户输入 -->
|
||||
<el-button v-popover:pop v-if="!userInput">
|
||||
<template v-if="value">
|
||||
<i :class="'fa fa-' + value"></i>
|
||||
</template>
|
||||
{{value ? value : placeholder}}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
||||
export default {
|
||||
name: 'd2-icon-select',
|
||||
props: {
|
||||
// 值
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '请选择'
|
||||
},
|
||||
// 弹出界面的方向
|
||||
placement: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'right'
|
||||
},
|
||||
// 是否可清空
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
// 是否允许用户输入
|
||||
userInput: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否在选择后自动关闭
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 绑定弹出框
|
||||
pop: false,
|
||||
// 所有图标
|
||||
icon,
|
||||
// 组件内输入框的值
|
||||
currentValue: '',
|
||||
// 搜索的文字
|
||||
searchText: '',
|
||||
// 不是搜索的时候显示的折叠面板绑定的展开数据
|
||||
collapseActive: []
|
||||
// collapseActive: [...Array(icon.length)].map((e, i) => i)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 输入框上绑定的设置
|
||||
bind () {
|
||||
return {
|
||||
placeholder: this.placeholder,
|
||||
clearable: this.clearable,
|
||||
...this.$attrs
|
||||
}
|
||||
},
|
||||
// 是否在搜索
|
||||
searchMode () {
|
||||
return !!this.searchText
|
||||
},
|
||||
// 过滤后的图标
|
||||
iconFilted () {
|
||||
return this.icon.map(iconClass => ({
|
||||
title: iconClass.title,
|
||||
icon: iconClass.icon.filter(icon => icon.indexOf(this.searchText) >= 0)
|
||||
})).filter(iconClass => iconClass.icon.length > 0)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (value) {
|
||||
this.currentValue = value
|
||||
},
|
||||
currentValue (value) {
|
||||
this.selectIcon(value)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.currentValue = this.value
|
||||
},
|
||||
methods: {
|
||||
selectIcon (iconName = '') {
|
||||
this.$emit('input', iconName)
|
||||
if (iconName && this.autoClose) {
|
||||
this.pop = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.group {
|
||||
max-height: 400px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
.class {
|
||||
.class-title {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: $color-bg;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.class-row {
|
||||
.class-col {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: $color-text-sub;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
background-color: $color-bg;
|
||||
border-radius: 4px;
|
||||
font-size: 26px;
|
||||
box-shadow: inset 0px 0px 0px 1px $color-border-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user