优化 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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user