sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/d2-icon-select/index.vue
View File

@@ -6,8 +6,15 @@
:placement="placement" :placement="placement"
width="300" width="300"
trigger="click"> trigger="click">
<div class="header d2-clearfix d2-mb-10" v-if="clearable"> <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> <el-button
type="danger"
icon="el-icon-delete"
size="mini"
class="d2-fr"
@click="selectIcon()">
清空
</el-button>
</div> </div>
<el-input <el-input
v-model="searchText" v-model="searchText"
@@ -15,20 +22,20 @@
placeholder="搜索 比如 'plus'" placeholder="搜索 比如 'plus'"
prefix-icon="el-icon-search"> prefix-icon="el-icon-search">
</el-input> </el-input>
<el-collapse v-if="!searchMode" class="group" v-model="collapseActive"> <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="class"> <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
<el-row class="class-row"> <el-row class="d2-icon-select--class-row">
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)"> <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> <i :class="'fa fa-' + iconName"></i>
</el-col> </el-col>
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
<div v-if="searchMode" class="group"> <div v-if="searchMode" class="d2-icon-select--group">
<div class="class" v-for="(item, index) in iconFilted" :key="index"> <div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
<div class="class-title">{{item.title}}</div> <div class="d2-icon-select--class-title">{{item.title}}</div>
<el-row class="class-row"> <el-row class="d2-icon-select--class-row">
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)"> <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> <i :class="'fa fa-' + iconName"></i>
</el-col> </el-col>
</el-row> </el-row>
@@ -159,22 +166,22 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.group { .d2-icon-select--group {
max-height: 400px; max-height: 400px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
.class { .d2-icon-select--class {
.class-title { .d2-icon-select--class-title {
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
background-color: $color-bg; background-color: $color-bg;
border-radius: 4px; border-radius: 4px;
margin: 10px 0px; margin: 10px 0px;
} }
.class-row { .d2-icon-select--class-row {
.class-col { .d2-icon-select--class-col {
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
color: $color-text-sub; color: $color-text-sub;

1
src/components/d2-icon-svg-select/data/index.js.REMOVED.git-id
View File

@@ -1 +0,0 @@
3283c245146c8130af1352a64561e780a3f585c5

89
src/components/d2-icon-svg-select/index.vue
View File

@@ -6,8 +6,17 @@
:placement="placement" :placement="placement"
width="300" width="300"
trigger="click"> trigger="click">
<div class="header d2-clearfix d2-mb-10" v-if="clearable"> <div
<el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button> 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> </div>
<el-input <el-input
v-model="searchText" v-model="searchText"
@@ -15,18 +24,16 @@
placeholder="搜索 比如 'plus'" placeholder="搜索 比如 'plus'"
prefix-icon="el-icon-search"> prefix-icon="el-icon-search">
</el-input> </el-input>
<div class="group"> <el-row class="d2-icon-svg-select--group">
<el-row> <el-col
<el-col v-for="(item, index) in iconFilted"
v-for="(item, index) in iconFilted" :key="index"
:key="index" class="d2-icon-svg-select--item"
class="icon-item" :span="4"
:span="4" @click.native="selectIcon(item)">
@click.native="selectIcon(item)"> <d2-icon-svg :name="item"/>
<d2-icon-svg :name="item"/> </el-col>
</el-col> </el-row>
</el-row>
</div>
</el-popover> </el-popover>
<!-- 允许用户输入 --> <!-- 允许用户输入 -->
<el-input <el-input
@@ -35,7 +42,9 @@
v-bind="bind" v-bind="bind"
style="max-width: 240px;"> style="max-width: 240px;">
<template v-if="value" slot="prepend"> <template v-if="value" slot="prepend">
<d2-icon-svg class="d2-icon-svg--input-preview" :name="value"/> <d2-icon-svg
class="d2-icon-svg-select--input-preview"
:name="value"/>
</template> </template>
<el-button v-popover:pop slot="append"> <el-button v-popover:pop slot="append">
<i class="fa fa-list"></i> <i class="fa fa-list"></i>
@@ -44,7 +53,10 @@
<!-- 不允许用户输入 --> <!-- 不允许用户输入 -->
<el-button v-popover:pop v-if="!userInput"> <el-button v-popover:pop v-if="!userInput">
<span flex="dir:left main:center cross:center"> <span flex="dir:left main:center cross:center">
<d2-icon-svg v-if="value" class="d2-icon-svg--input-preview d2-mr-10" :name="value"/> <d2-icon-svg
v-if="value"
class="d2-icon-svg-select--input-preview d2-mr-10"
:name="value"/>
<span>{{value ? value : placeholder}}</span> <span>{{value ? value : placeholder}}</span>
</span> </span>
</el-button> </el-button>
@@ -52,9 +64,8 @@
</template> </template>
<script> <script>
import icon from './data/index'
export default { export default {
name: 'd2-icon-select', name: 'd2-icon-svg-select',
props: { props: {
// 值 // 值
value: { value: {
@@ -97,14 +108,10 @@ export default {
return { return {
// 绑定弹出框 // 绑定弹出框
pop: false, pop: false,
// 所有图标
icon,
// 组件内输入框的值 // 组件内输入框的值
currentValue: '', currentValue: '',
// 搜索的文字 // 搜索的文字
searchText: '', searchText: ''
// 不是搜索的时候显示的折叠面板绑定的展开数据
collapseActive: []
} }
}, },
computed: { computed: {
@@ -148,32 +155,32 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.d2-icon-svg--input-preview { .d2-icon-svg-select--input-preview {
height: 14px; height: 14px;
width: 14px; width: 14px;
display: block; display: block;
} }
.group { .d2-icon-svg-select--group {
max-height: 400px; max-height: 400px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin-top: 10px; margin-top: 10px;
.icon-item { }
height: 40px; .d2-icon-svg-select--item {
display: flex; height: 40px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
color: $color-text-sub; align-items: center;
svg { color: $color-text-sub;
height: 20px; svg {
width: 20px; height: 20px;
} width: 20px;
&:hover { }
color: $color-text-main; &:hover {
background-color: $color-bg; color: $color-text-main;
border-radius: 4px; background-color: $color-bg;
box-shadow: inset 0px 0px 0px 1px $color-border-1; border-radius: 4px;
} box-shadow: inset 0px 0px 0px 1px $color-border-1;
} }
} }
</style> </style>