优化 d2-icon-select d2-icon-svg-select

Former-commit-id: 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 275123feb74c1c623162bbc40297f0aa7bc86fe0 [formerly 61a358238bfa2687b4af53abb16f97ed66000360]]]]]
Former-commit-id: 49fe5afc42637c517173105f33df8c8870d7fe88
Former-commit-id: 9f9153a76016993bdedfd6e6f7732e668b2047ea
Former-commit-id: cf1a0a4bf0e33deb3167c3583a4b98b18dc3246e [formerly 9612610849efccc456868c65de8f6d78fe1eb690]
Former-commit-id: 57967a2dcda29767e87196b4d82e433e4246e653
Former-commit-id: 85c96b419d24a43117c75a34fcc8454b57f72336
Former-commit-id: e58a7e88a7925b5e0761f919fa2f2160a350b681
Former-commit-id: 94635a1b758e730f362bf40949676cc2b320bf55
Former-commit-id: 6f412615cab141a24d32e1c259f949c13f78c6b9
This commit is contained in:
liyang
2018-12-12 22:01:27 +08:00
parent d7a2b04f45
commit 82c7f98e7c
3 changed files with 71 additions and 58 deletions

View File

@@ -6,8 +6,15 @@
: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 class="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"
@@ -15,20 +22,20 @@
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)">
<el-collapse v-if="!searchMode" class="d2-icon-select--group" v-model="collapseActive">
<el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
<el-row class="d2-icon-select--class-row">
<el-col class="d2-icon-select--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)">
<div v-if="searchMode" class="d2-icon-select--group">
<div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
<div class="d2-icon-select--class-title">{{item.title}}</div>
<el-row class="d2-icon-select--class-row">
<el-col class="d2-icon-select--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>
@@ -159,22 +166,22 @@ export default {
</script>
<style lang="scss" scoped>
.group {
.d2-icon-select--group {
max-height: 400px;
overflow-x: hidden;
overflow-y: scroll;
border-top: none;
border-bottom: none;
.class {
.class-title {
.d2-icon-select--class {
.d2-icon-select--class-title {
line-height: 30px;
text-align: center;
background-color: $color-bg;
border-radius: 4px;
margin: 10px 0px;
}
.class-row {
.class-col {
.d2-icon-select--class-row {
.d2-icon-select--class-col {
line-height: 40px;
text-align: center;
color: $color-text-sub;