bri-components 1.4.98 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/components/controls/base/DshSwitch/DshSwitch.vue +2 -2
- package/src/components/controls/controlMap.js +4 -4
- package/src/components/controls/extra/DshThemeColor.vue +100 -0
- package/src/components/controls/extra/DshThemeIcon.vue +125 -0
- package/src/components/controls/senior/DshLabels.vue +4 -2
- package/src/components/controls/senior/selectUsers/selectUsers.vue +0 -1
- package/src/components/form/searchMixin.js +2 -1
- package/src/components/list/DshFlatTable.vue +1 -3
- package/src/components/list/mixins/tableBaseMixin.js +2 -5
- package/src/components/list/mixins/treeTableBaseMixin.js +1 -4
- package/src/index.js +11 -0
- package/src/styles/global/variables.less +5 -0
- package/src/styles/reset-easytable.less +2 -2
- package/src/styles/reset-iview-variables.less +4 -4
- package/src/components/controls/extra/themeColor.vue +0 -104
- package/src/components/controls/extra/themeIcon.vue +0 -114
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bri-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"author": "dengshanghui",
|
|
5
5
|
"description": "a component lib for vue project",
|
|
6
6
|
"main": "src/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"ali-oss": "^6.13.1",
|
|
34
34
|
"axios": "^0.23.0",
|
|
35
|
-
"bri-datas": "^1.
|
|
35
|
+
"bri-datas": "^1.3.0",
|
|
36
36
|
"jshint": "^2.12.0",
|
|
37
37
|
"jsonlint": "^1.6.3",
|
|
38
38
|
"minio": "7.1.0",
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
:disabled="disabled"
|
|
10
10
|
:loading="selfPropsObj.loading"
|
|
11
11
|
:size="selfPropsObj._size"
|
|
12
|
-
:true-color="propsObj._openColor
|
|
13
|
-
:false-color="propsObj._closeColor
|
|
12
|
+
:true-color="propsObj._openColor"
|
|
13
|
+
:false-color="propsObj._closeColor"
|
|
14
14
|
:true-value="selfPropsObj._openValue"
|
|
15
15
|
:false-value="selfPropsObj._closeValue"
|
|
16
16
|
>
|
|
@@ -43,8 +43,8 @@ const componentNameMap = {
|
|
|
43
43
|
flatTable: "flatTable",
|
|
44
44
|
cascaderTable: "cascaderTable",
|
|
45
45
|
|
|
46
|
-
themeColor: "
|
|
47
|
-
themeIcon: "
|
|
46
|
+
themeColor: "DshThemeColor",
|
|
47
|
+
themeIcon: "DshThemeIcon",
|
|
48
48
|
color: "DshColor",
|
|
49
49
|
|
|
50
50
|
back: "DshBack",
|
|
@@ -78,8 +78,8 @@ const pathMap = {
|
|
|
78
78
|
cascaderTable: "./senior/cascaderTable"
|
|
79
79
|
},
|
|
80
80
|
extra: {
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
DshThemeColor: "./extra/DshThemeColor.vue",
|
|
82
|
+
DshThemeIcon: "./extra/DshThemeIcon.vue",
|
|
83
83
|
DshColor: "./extra/DshColor.vue"
|
|
84
84
|
},
|
|
85
85
|
special: {
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="DshThemeColor">
|
|
3
|
+
<div
|
|
4
|
+
v-for="(colorItem, colorKey) in themeColorMap"
|
|
5
|
+
:key="colorKey"
|
|
6
|
+
class="item"
|
|
7
|
+
@click="curVal = colorKey"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="item-content"
|
|
11
|
+
:style="{
|
|
12
|
+
backgroundColor: colorItem.color
|
|
13
|
+
}"
|
|
14
|
+
>
|
|
15
|
+
<Icon
|
|
16
|
+
v-if="colorKey === curVal"
|
|
17
|
+
class="item-content-icon"
|
|
18
|
+
type="ios-checkmark-circle"
|
|
19
|
+
:color="colorItem.color"
|
|
20
|
+
size="18"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
import controlMixin from "../mixins/controlMixin.js";
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
name: "DshThemeColor",
|
|
32
|
+
mixins: [
|
|
33
|
+
controlMixin
|
|
34
|
+
],
|
|
35
|
+
components: {},
|
|
36
|
+
props: {},
|
|
37
|
+
data () {
|
|
38
|
+
return {};
|
|
39
|
+
},
|
|
40
|
+
computed: {
|
|
41
|
+
selfPropsObj () {
|
|
42
|
+
return {
|
|
43
|
+
...this.propsObj,
|
|
44
|
+
...this.commonDealPropsObj
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
themeColorMap () {
|
|
49
|
+
return this.$appData.themeColorMap || {};
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
created () {
|
|
53
|
+
// this.init();
|
|
54
|
+
},
|
|
55
|
+
methods: {
|
|
56
|
+
// init () {
|
|
57
|
+
// if (!this.curVal) {
|
|
58
|
+
// this.curVal = Object.keys(this.themeColorMap)[0];
|
|
59
|
+
// }
|
|
60
|
+
// }
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<style lang="less" scoped>
|
|
66
|
+
.DshThemeColor {
|
|
67
|
+
width: 100%;
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-wrap: wrap;
|
|
70
|
+
|
|
71
|
+
.item {
|
|
72
|
+
display: inlile-block;
|
|
73
|
+
width: 54px;
|
|
74
|
+
height: 54px;
|
|
75
|
+
margin-right: 7px;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
|
|
78
|
+
&-content {
|
|
79
|
+
width: 38px;
|
|
80
|
+
height: 38px;
|
|
81
|
+
margin: 8px auto;
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
position: relative;
|
|
84
|
+
|
|
85
|
+
&-icon {
|
|
86
|
+
position: absolute;
|
|
87
|
+
bottom: 0px;
|
|
88
|
+
right: 0px;
|
|
89
|
+
border-radius: 50%;
|
|
90
|
+
background-color: rgba(255, 255, 255, 0.85);
|
|
91
|
+
color: @themeColor;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:last-of-type {
|
|
96
|
+
margin-right: 0px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="DshThemeIcon"
|
|
4
|
+
:style="{
|
|
5
|
+
'--theme-color-self': relateColor
|
|
6
|
+
}"
|
|
7
|
+
>
|
|
8
|
+
<div
|
|
9
|
+
v-for="icon in themeIcons"
|
|
10
|
+
:key="icon"
|
|
11
|
+
:class="{
|
|
12
|
+
'item': true,
|
|
13
|
+
'item-active': icon === curVal
|
|
14
|
+
}"
|
|
15
|
+
@click="curVal = icon"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
class="item-content"
|
|
19
|
+
:style="{
|
|
20
|
+
'backgroundColor': relateColor
|
|
21
|
+
}"
|
|
22
|
+
>
|
|
23
|
+
<Icon :custom="'bico-font ' + iconPrefix + icon.replace('icon-', 'icon')" />
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
import controlMixin from "../mixins/controlMixin.js";
|
|
31
|
+
|
|
32
|
+
export default {
|
|
33
|
+
name: "DshThemeIcon",
|
|
34
|
+
mixins: [
|
|
35
|
+
controlMixin
|
|
36
|
+
],
|
|
37
|
+
components: {},
|
|
38
|
+
props: {},
|
|
39
|
+
data () {
|
|
40
|
+
return {};
|
|
41
|
+
},
|
|
42
|
+
computed: {
|
|
43
|
+
selfPropsObj () {
|
|
44
|
+
return {
|
|
45
|
+
_relateColorKey: "colorType",
|
|
46
|
+
_iconPrefix: "bico-",
|
|
47
|
+
|
|
48
|
+
...this.propsObj,
|
|
49
|
+
...this.commonDealPropsObj
|
|
50
|
+
};
|
|
51
|
+
},
|
|
52
|
+
relateColorKey () {
|
|
53
|
+
return this.selfPropsObj._relateColorKey;
|
|
54
|
+
},
|
|
55
|
+
relateColorVal () {
|
|
56
|
+
return this.value[this.relateColorKey];
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
themeIcons () {
|
|
60
|
+
return this.$appData.themeIcons || [];
|
|
61
|
+
},
|
|
62
|
+
iconPrefix () {
|
|
63
|
+
return this.selfPropsObj._iconPrefix;
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
themeColorMap () {
|
|
67
|
+
return this.$appData.themeColorMap || {};
|
|
68
|
+
},
|
|
69
|
+
relateColorData () {
|
|
70
|
+
return this.themeColorMap[this.relateColorVal] || {};
|
|
71
|
+
},
|
|
72
|
+
relateColor () {
|
|
73
|
+
return this.relateColorData.color;
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
created () {
|
|
77
|
+
// this.init();
|
|
78
|
+
},
|
|
79
|
+
methods: {
|
|
80
|
+
// init () {
|
|
81
|
+
// if (!this.curVal) {
|
|
82
|
+
// this.curVal = this.themeIcons[0];
|
|
83
|
+
// }
|
|
84
|
+
// }
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
</script>
|
|
88
|
+
|
|
89
|
+
<style lang="less" scoped>
|
|
90
|
+
@theme-color-self: var(--theme-color-self, @themeColor);
|
|
91
|
+
|
|
92
|
+
.DshThemeIcon {
|
|
93
|
+
width: 100%;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-wrap: wrap;
|
|
96
|
+
|
|
97
|
+
.item {
|
|
98
|
+
min-width: 54px;
|
|
99
|
+
height: 54px;
|
|
100
|
+
margin-right: 7px;
|
|
101
|
+
border: 1px solid transparent;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
|
|
105
|
+
&-content {
|
|
106
|
+
width: 38px;
|
|
107
|
+
height: 38px;
|
|
108
|
+
margin: 8px auto;
|
|
109
|
+
border-radius: 38px;
|
|
110
|
+
line-height: 38px;
|
|
111
|
+
text-align: center;
|
|
112
|
+
|
|
113
|
+
i {
|
|
114
|
+
font-size: 20px;
|
|
115
|
+
color: #ffffff;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&:hover,
|
|
120
|
+
&-active {
|
|
121
|
+
border-color: @theme-color-self;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
>
|
|
47
47
|
<template #suffix>
|
|
48
48
|
<Icon
|
|
49
|
-
|
|
49
|
+
class="item-edit-icon"
|
|
50
50
|
custom="bri bri-duigou"
|
|
51
51
|
@click.native.stop="clickConfirm(listItem)"
|
|
52
52
|
/>
|
|
@@ -287,7 +287,9 @@
|
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
&-edit {
|
|
290
|
-
|
|
290
|
+
&-icon {
|
|
291
|
+
color: @themeColor;
|
|
292
|
+
}
|
|
291
293
|
}
|
|
292
294
|
|
|
293
295
|
&-show {
|
|
@@ -83,7 +83,6 @@
|
|
|
83
83
|
|
|
84
84
|
<span
|
|
85
85
|
class="DshFlatTable-sort"
|
|
86
|
-
:style="{ color: appColor }"
|
|
87
86
|
@click="changeDescSort()"
|
|
88
87
|
>
|
|
89
88
|
<dsh-icons
|
|
@@ -193,7 +192,6 @@
|
|
|
193
192
|
|
|
194
193
|
<span
|
|
195
194
|
class="DshFlatTable-sort"
|
|
196
|
-
:style="{ color: appColor }"
|
|
197
195
|
@click="changeDescSort()"
|
|
198
196
|
>
|
|
199
197
|
<dsh-icons
|
|
@@ -309,7 +307,7 @@
|
|
|
309
307
|
&-sort {
|
|
310
308
|
margin-left: 5px;
|
|
311
309
|
font-weight: 600;
|
|
312
|
-
|
|
310
|
+
color: @themeColor;
|
|
313
311
|
cursor: pointer;
|
|
314
312
|
|
|
315
313
|
&-icons {
|
|
@@ -200,10 +200,7 @@ export default {
|
|
|
200
200
|
},
|
|
201
201
|
computed: {
|
|
202
202
|
appObj () {
|
|
203
|
-
return this.$store.getters.
|
|
204
|
-
},
|
|
205
|
-
appColor () {
|
|
206
|
-
return ((this.$appData.themeColors || {})[this.appObj.colorType] || {}).color || "#3DB8C5";
|
|
203
|
+
return this.$store.getters.appThemeColor;
|
|
207
204
|
},
|
|
208
205
|
|
|
209
206
|
dshRender () {
|
|
@@ -719,7 +716,7 @@ export default {
|
|
|
719
716
|
tip: this.showMode === "form"
|
|
720
717
|
? this.baseOperationMap.canInsert.tip.replace("行", "条")
|
|
721
718
|
: this.baseOperationMap.canInsert.tip,
|
|
722
|
-
color: this.
|
|
719
|
+
color: this.appThemeColor
|
|
723
720
|
},
|
|
724
721
|
canHideOrShow: {
|
|
725
722
|
...this.topOperationMap.canHideOrShow,
|
|
@@ -79,10 +79,7 @@ export default {
|
|
|
79
79
|
tip: this.showMode === "form"
|
|
80
80
|
? this.baseOperationMap.canCreateChild.tip.replace("行", "条")
|
|
81
81
|
: this.baseOperationMap.canCreateChild.tip,
|
|
82
|
-
color: this.
|
|
83
|
-
// style: {
|
|
84
|
-
// color: this.appColor
|
|
85
|
-
// }
|
|
82
|
+
color: this.appThemeColor
|
|
86
83
|
}
|
|
87
84
|
};
|
|
88
85
|
}
|
package/src/index.js
CHANGED
|
@@ -21,6 +21,7 @@ import DshDefaultSearch from "./components/form/DshDefaultSearch.vue";
|
|
|
21
21
|
// unit
|
|
22
22
|
import DshFormUnit from "./components/unit/DshFormUnit.vue";
|
|
23
23
|
import DshListUnit from "./components/unit/DshListUnit.vue";
|
|
24
|
+
|
|
24
25
|
// controls
|
|
25
26
|
import DshControlInput from "./components/controls/DshControlInput.vue";
|
|
26
27
|
import DshInput from "./components/controls/base/DshInput/DshInput.vue";
|
|
@@ -83,7 +84,12 @@ import DshPackage from "./components/controls/senior/DshPackage.vue";
|
|
|
83
84
|
import selectUsers from "./components/controls/senior/selectUsers/selectUsers.vue";
|
|
84
85
|
import departMenu from "./components/controls/senior/selectUsers/departMenu.vue";
|
|
85
86
|
import selectDepartments from "./components/controls/senior/selectDepartments.vue";
|
|
87
|
+
// import DshLabels from "./components/controls/senior/DshLabels.vue";
|
|
88
|
+
// import flatTable from "./components/controls/senior/flatTable.vue";
|
|
89
|
+
// import cascaderTable from "./components/controls/senior/cascaderTable.vue";
|
|
86
90
|
|
|
91
|
+
import DshThemeColor from "./components/controls/extra/DshThemeColor.vue";
|
|
92
|
+
import DshThemeIcon from "./components/controls/extra/DshThemeIcon.vue";
|
|
87
93
|
import DshColor from "./components/controls/extra/DshColor.vue";
|
|
88
94
|
|
|
89
95
|
// import DshBack from "./components/controls/special/DshBack.vue";
|
|
@@ -255,7 +261,12 @@ export {
|
|
|
255
261
|
selectUsers,
|
|
256
262
|
departMenu,
|
|
257
263
|
selectDepartments,
|
|
264
|
+
// DshLabels,
|
|
265
|
+
// flatTable,
|
|
266
|
+
// cascaderTable,
|
|
258
267
|
|
|
268
|
+
DshThemeColor,
|
|
269
|
+
DshThemeIcon,
|
|
259
270
|
DshColor,
|
|
260
271
|
|
|
261
272
|
// DshBack,
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
// 主题色
|
|
2
|
+
@themeColor-default : #3DB8C5;
|
|
3
|
+
@theme-hover-default : #7DD0D8;
|
|
4
|
+
@theme-active-default : #298089;
|
|
5
|
+
@theme-focus-default : #DCF2F4;
|
|
6
|
+
@theme-disabled-default : #BCE7EB;
|
|
2
7
|
@themeColor : #3DB8C5; // 主题颜色
|
|
3
8
|
@theme-hover : #7DD0D8;
|
|
4
9
|
@theme-active : #298089;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
@ve-primary-color : @themeColor;
|
|
3
3
|
@ve-default-text-color : @textColor;
|
|
4
4
|
@ve-table-border-color : @borderColor;
|
|
5
|
-
@ve-table-body-row-hover-background-color :
|
|
6
|
-
@ve-table-body-row-highlight-background-color:
|
|
5
|
+
@ve-table-body-row-hover-background-color : @theme-focus;
|
|
6
|
+
@ve-table-body-row-highlight-background-color: @theme-focus;
|
|
7
7
|
@ve-table-head-text-color : @contentColor;
|
|
8
8
|
@ve-table-foot-text-color : @textColor;
|
|
9
9
|
@ve-table-header-background-color : @btn-hover;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// 可替换样式 https://github.com/view-design/ViewUI/blob/master/src/styles/custom.less
|
|
2
|
-
@primary-color : @themeColor;
|
|
2
|
+
@primary-color : @themeColor-default;
|
|
3
3
|
@info-color : #2db7f5;
|
|
4
4
|
@success-color : #19be6b;
|
|
5
|
-
@processing-color : @themeColor;
|
|
5
|
+
@processing-color : @themeColor-default;
|
|
6
6
|
@warning-color : #ff9900;
|
|
7
7
|
@error-color : #ed4014;
|
|
8
8
|
@normal-color : #ff0000;
|
|
9
|
-
@link-color : @themeColor;
|
|
9
|
+
@link-color : @themeColor-default;
|
|
10
10
|
|
|
11
11
|
// Base
|
|
12
12
|
@font-family : "PingFang SC","Microsoft YaHei","微软雅黑";
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
@btn-disable-bg : #E5E5E5;
|
|
29
29
|
@btn-disable-border : #ccc;
|
|
30
30
|
@btn-font-size-small : 12px;
|
|
31
|
-
@btn-ghost-color : @themeColor;
|
|
31
|
+
@btn-ghost-color : @themeColor-default;
|
|
32
32
|
@btn-ghost-bg : rgba(255, 255,255, 0.9);
|
|
33
33
|
@btn-ghost-border : #E5E5E5;
|
|
34
34
|
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="themeColor">
|
|
3
|
-
<div class="themeColor-colors">
|
|
4
|
-
<div
|
|
5
|
-
v-for="(colorItem, colorKey) in themeColorMap"
|
|
6
|
-
:key="colorKey"
|
|
7
|
-
class="item"
|
|
8
|
-
@click="curVal = colorKey"
|
|
9
|
-
>
|
|
10
|
-
<div
|
|
11
|
-
class="item-content"
|
|
12
|
-
:style="{
|
|
13
|
-
backgroundColor: colorItem.color
|
|
14
|
-
}"
|
|
15
|
-
></div>
|
|
16
|
-
<Icon
|
|
17
|
-
v-if="colorKey === curVal"
|
|
18
|
-
class="item-icon"
|
|
19
|
-
type="ios-checkmark-circle"
|
|
20
|
-
size="16"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
|
|
27
|
-
<script>
|
|
28
|
-
import controlMixin from "../mixins/controlMixin.js";
|
|
29
|
-
|
|
30
|
-
export default {
|
|
31
|
-
name: "themeColor",
|
|
32
|
-
mixins: [
|
|
33
|
-
controlMixin
|
|
34
|
-
],
|
|
35
|
-
components: {},
|
|
36
|
-
props: {},
|
|
37
|
-
data () {
|
|
38
|
-
return {};
|
|
39
|
-
},
|
|
40
|
-
computed: {
|
|
41
|
-
selfPropsObj () {
|
|
42
|
-
return {
|
|
43
|
-
_relateColorkey: "colorType",
|
|
44
|
-
|
|
45
|
-
...this.propsObj,
|
|
46
|
-
...this.commonDealPropsObj
|
|
47
|
-
};
|
|
48
|
-
},
|
|
49
|
-
themeColorMap () {
|
|
50
|
-
return this.$appData.themeColors || {};
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
created () {
|
|
54
|
-
// this.init();
|
|
55
|
-
},
|
|
56
|
-
methods: {
|
|
57
|
-
init () {
|
|
58
|
-
if (!this.curVal) {
|
|
59
|
-
this.curVal = Object.keys(this.themeColorMap)[0];
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
</script>
|
|
65
|
-
|
|
66
|
-
<style lang="less" scoped>
|
|
67
|
-
.themeColor {
|
|
68
|
-
width: 100%;
|
|
69
|
-
|
|
70
|
-
&-colors {
|
|
71
|
-
display: flex;
|
|
72
|
-
|
|
73
|
-
.item {
|
|
74
|
-
display: inlile-block;
|
|
75
|
-
width: 54px;
|
|
76
|
-
height: 54px;
|
|
77
|
-
margin-right: 7px;
|
|
78
|
-
cursor: pointer;
|
|
79
|
-
position: relative;
|
|
80
|
-
|
|
81
|
-
&-content {
|
|
82
|
-
width: 38px;
|
|
83
|
-
height: 38px;
|
|
84
|
-
margin: 8px auto;
|
|
85
|
-
border-radius: 50%;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
&-icon {
|
|
89
|
-
position: absolute;
|
|
90
|
-
bottom: 7px;
|
|
91
|
-
right: 7px;
|
|
92
|
-
|
|
93
|
-
border-radius: 50%;
|
|
94
|
-
background-color: rgba(255, 255, 255, 0.85);
|
|
95
|
-
color: @themeColor;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&:last-of-type {
|
|
99
|
-
margin-right: 0px;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
</style>
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="themeIcon">
|
|
3
|
-
<div class="themeIcon-icons">
|
|
4
|
-
<div
|
|
5
|
-
v-for="(iconItem, iconKey) in iconMap"
|
|
6
|
-
:key="iconKey"
|
|
7
|
-
:class="{
|
|
8
|
-
'item': true,
|
|
9
|
-
'item-active': iconKey === curVal
|
|
10
|
-
}"
|
|
11
|
-
:style="{
|
|
12
|
-
'borderColor': iconKey === curVal ? bgColor : undefined
|
|
13
|
-
}"
|
|
14
|
-
@click="curVal = iconKey"
|
|
15
|
-
>
|
|
16
|
-
<div
|
|
17
|
-
class="item-content"
|
|
18
|
-
:style="{
|
|
19
|
-
'backgroundColor': bgColor
|
|
20
|
-
}"
|
|
21
|
-
>
|
|
22
|
-
<Icon :custom="'bico-font ' + iconItem" />
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
</template>
|
|
28
|
-
|
|
29
|
-
<script>
|
|
30
|
-
import controlMixin from "../mixins/controlMixin.js";
|
|
31
|
-
|
|
32
|
-
export default {
|
|
33
|
-
name: "themeIcon",
|
|
34
|
-
mixins: [
|
|
35
|
-
controlMixin
|
|
36
|
-
],
|
|
37
|
-
components: {},
|
|
38
|
-
props: {},
|
|
39
|
-
data () {
|
|
40
|
-
return {};
|
|
41
|
-
},
|
|
42
|
-
computed: {
|
|
43
|
-
selfPropsObj () {
|
|
44
|
-
return {
|
|
45
|
-
_relateColorkey: "colorType",
|
|
46
|
-
|
|
47
|
-
...this.propsObj,
|
|
48
|
-
...this.commonDealPropsObj
|
|
49
|
-
};
|
|
50
|
-
},
|
|
51
|
-
iconMap () {
|
|
52
|
-
return this.$appData.themeIcons || {};
|
|
53
|
-
},
|
|
54
|
-
relateColorkey () {
|
|
55
|
-
return this.selfPropsObj._relateColorkey;
|
|
56
|
-
},
|
|
57
|
-
themeColorMap () {
|
|
58
|
-
return this.$appData.themeColors || {};
|
|
59
|
-
},
|
|
60
|
-
bgColor () {
|
|
61
|
-
return (this.themeColorMap[this.value[this.relateColorkey]] || {}).bgColor;
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
created () {
|
|
65
|
-
// this.init();
|
|
66
|
-
},
|
|
67
|
-
methods: {
|
|
68
|
-
init () {
|
|
69
|
-
if (!this.curVal) {
|
|
70
|
-
this.curVal = Object.keys(this.iconMap)[0];
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<style lang="less" scoped>
|
|
78
|
-
.themeIcon {
|
|
79
|
-
width: 100%;
|
|
80
|
-
|
|
81
|
-
&-icons {
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-wrap: wrap;
|
|
84
|
-
|
|
85
|
-
.item {
|
|
86
|
-
min-width: 54px;
|
|
87
|
-
height: 54px;
|
|
88
|
-
margin-right: 7px;
|
|
89
|
-
border: 1px solid transparent;
|
|
90
|
-
border-radius: 8px;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
|
|
93
|
-
&-content {
|
|
94
|
-
width: 38px;
|
|
95
|
-
height: 38px;
|
|
96
|
-
margin: 8px auto;
|
|
97
|
-
border-radius: 38px;
|
|
98
|
-
line-height: 38px;
|
|
99
|
-
text-align: center;
|
|
100
|
-
|
|
101
|
-
i {
|
|
102
|
-
font-size: 20px;
|
|
103
|
-
color: #ffffff;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&:hover,
|
|
108
|
-
&-active {
|
|
109
|
-
border-color: @themeColor;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
</style>
|