meixioacomponent 0.3.47 → 0.3.50
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/lib/meixioacomponent.common.js +396 -302
- package/lib/meixioacomponent.umd.js +396 -302
- package/lib/meixioacomponent.umd.min.js +19 -19
- package/package.json +1 -1
- package/packages/components/base/baseIcon/index.vue +9 -2
- package/packages/components/base/baseImg/baseImg.vue +18 -1
- package/packages/components/base/basePopoverButton/index.vue +25 -23
- package/packages/components/base/baseUpload/baseUpload.vue +12 -1
- package/packages/components/base/baseUpload/baseUploadItem.vue +61 -19
- package/packages/components/proPageTable/oa_pro_table.vue +12 -0
- package/src/App.vue +6 -1
package/package.json
CHANGED
|
@@ -141,15 +141,22 @@ export default {
|
|
|
141
141
|
.event {
|
|
142
142
|
cursor: pointer;
|
|
143
143
|
&:hover {
|
|
144
|
-
|
|
144
|
+
background: var(--hover-gray);
|
|
145
145
|
i {
|
|
146
|
-
color: var(--color-primary);
|
|
146
|
+
color: var(--color-primary) !important;
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
.plain {
|
|
151
151
|
width: auto;
|
|
152
152
|
height: auto;
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
&:hover {
|
|
155
|
+
background: inherit !important;
|
|
156
|
+
i {
|
|
157
|
+
color: inherit !important;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
153
160
|
}
|
|
154
161
|
.disable {
|
|
155
162
|
cursor: not-allowed;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="base-img-wrap" :class="[shape]">
|
|
2
|
+
<div class="base-img-wrap" :class="[shape]" :style="baseImgWrap">
|
|
3
3
|
<img
|
|
4
4
|
alt=""
|
|
5
5
|
:src="src"
|
|
@@ -63,6 +63,14 @@ export default {
|
|
|
63
63
|
type: String,
|
|
64
64
|
default: 'rect',
|
|
65
65
|
},
|
|
66
|
+
size: {
|
|
67
|
+
type: Array,
|
|
68
|
+
default: () => ['100%', '100%'],
|
|
69
|
+
},
|
|
70
|
+
radius: {
|
|
71
|
+
type: Number,
|
|
72
|
+
default: 0,
|
|
73
|
+
},
|
|
66
74
|
},
|
|
67
75
|
computed: {
|
|
68
76
|
imgStyle() {
|
|
@@ -79,6 +87,15 @@ export default {
|
|
|
79
87
|
this.isError = true
|
|
80
88
|
return false
|
|
81
89
|
},
|
|
90
|
+
|
|
91
|
+
baseImgWrap() {
|
|
92
|
+
const { size, radius } = this.$props
|
|
93
|
+
return {
|
|
94
|
+
borderRadius: `${radius}px`,
|
|
95
|
+
width: typeof size[0] == 'number' ? `${size[0]}px` : size[0],
|
|
96
|
+
height: typeof size[1] == 'number' ? `${size[1]}px` : size[1],
|
|
97
|
+
}
|
|
98
|
+
},
|
|
82
99
|
},
|
|
83
100
|
methods: {
|
|
84
101
|
init() {
|
|
@@ -12,29 +12,30 @@
|
|
|
12
12
|
<slot name="popoverContent"></slot>
|
|
13
13
|
</div>
|
|
14
14
|
</template>
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
</
|
|
15
|
+
<template v-if="!template" slot="reference">
|
|
16
|
+
<el-button
|
|
17
|
+
:size="buttonSize"
|
|
18
|
+
:disabled="disabled"
|
|
19
|
+
class="popover-button"
|
|
20
|
+
:type="module ? 'selected' : 'info'"
|
|
21
|
+
@click.stop="buttonClick"
|
|
22
|
+
:class="{ 'is-single': !buttonText && buttonIcon }"
|
|
23
|
+
>
|
|
24
|
+
<base-icon
|
|
25
|
+
:size="`s`"
|
|
26
|
+
:plain="true"
|
|
27
|
+
v-if="buttonIcon"
|
|
28
|
+
:event="!disabled"
|
|
29
|
+
:name="buttonIcon"
|
|
30
|
+
class="button-icon"
|
|
31
|
+
:iconClass="iconClass"
|
|
32
|
+
@iconClick="iconClick"
|
|
33
|
+
:color="module ? 'text-white' : 'd'"
|
|
34
|
+
></base-icon>
|
|
35
|
+
<span class="inner-span" v-if="buttonText">{{ buttonText }}</span>
|
|
36
|
+
</el-button>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
38
39
|
<template slot="reference" v-else>
|
|
39
40
|
<slot name="popoverReference"></slot>
|
|
40
41
|
</template>
|
|
@@ -117,6 +118,7 @@ export default {
|
|
|
117
118
|
iconClick() {
|
|
118
119
|
this.$refs.popover.doShow()
|
|
119
120
|
},
|
|
121
|
+
buttonClick() {},
|
|
120
122
|
},
|
|
121
123
|
}
|
|
122
124
|
</script>
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
<baseUploadItemVue
|
|
5
5
|
:key="index"
|
|
6
6
|
:type="`img`"
|
|
7
|
+
:size="outline"
|
|
7
8
|
:isGroup="true"
|
|
8
9
|
:uploadItem="item"
|
|
9
10
|
v-for="(item, index) in module"
|
|
@@ -14,13 +15,17 @@
|
|
|
14
15
|
v-show="!isMax"
|
|
15
16
|
ref="itemUpload"
|
|
16
17
|
:isGroup="true"
|
|
18
|
+
:size="outline"
|
|
19
|
+
:fileSize="fileSize"
|
|
17
20
|
:fileType="fileType"
|
|
18
21
|
:uploadType="`multiple`"
|
|
19
22
|
@inputChange="inputChange"
|
|
20
23
|
></baseUploadItemVue>
|
|
21
24
|
</div>
|
|
22
25
|
<div class="base-upload-footer">
|
|
23
|
-
<span>
|
|
26
|
+
<span>
|
|
27
|
+
{{ textNotic }}(最多{{ max }}张),文件大小限制{{ fileSize }}MB
|
|
28
|
+
</span>
|
|
24
29
|
</div>
|
|
25
30
|
</div>
|
|
26
31
|
</template>
|
|
@@ -65,6 +70,12 @@ export default {
|
|
|
65
70
|
type: String,
|
|
66
71
|
default: 'img',
|
|
67
72
|
},
|
|
73
|
+
outline: {
|
|
74
|
+
type: Array,
|
|
75
|
+
},
|
|
76
|
+
fileSize: {
|
|
77
|
+
default: 99,
|
|
78
|
+
},
|
|
68
79
|
},
|
|
69
80
|
computed: {
|
|
70
81
|
module: {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
|
|
3
|
+
:style="wrapStyle"
|
|
4
4
|
:class="[`${shape}`]"
|
|
5
5
|
v-on:paste="onPasteFile"
|
|
6
|
+
class="base-upload-item-wrap"
|
|
6
7
|
>
|
|
7
8
|
<div class="type-upload" v-if="type == 'upload'">
|
|
8
9
|
<input
|
|
@@ -49,7 +50,9 @@
|
|
|
49
50
|
:size="`l`"
|
|
50
51
|
:color="`d`"
|
|
51
52
|
:event="true"
|
|
53
|
+
:plain="true"
|
|
52
54
|
v-if="!disabled"
|
|
55
|
+
style="width: 32px; height: 32px;"
|
|
53
56
|
:name="`meixicomponenticon-close`"
|
|
54
57
|
@iconClick="handleDeleteUploadItem"
|
|
55
58
|
></base-icon>
|
|
@@ -113,6 +116,14 @@ export default {
|
|
|
113
116
|
isGroup: {
|
|
114
117
|
default: false,
|
|
115
118
|
},
|
|
119
|
+
|
|
120
|
+
size: {
|
|
121
|
+
type: Array,
|
|
122
|
+
},
|
|
123
|
+
|
|
124
|
+
fileSize: {
|
|
125
|
+
default: 99,
|
|
126
|
+
},
|
|
116
127
|
},
|
|
117
128
|
computed: {
|
|
118
129
|
module: {
|
|
@@ -156,6 +167,39 @@ export default {
|
|
|
156
167
|
props.uploadType == 'single'
|
|
157
168
|
)
|
|
158
169
|
},
|
|
170
|
+
|
|
171
|
+
wrapStyle() {
|
|
172
|
+
const { size, shape } = this.$props
|
|
173
|
+
if (size) {
|
|
174
|
+
return {
|
|
175
|
+
width: `${size[0]}px`,
|
|
176
|
+
height: `${size[1]}px`,
|
|
177
|
+
}
|
|
178
|
+
} else {
|
|
179
|
+
switch (shape) {
|
|
180
|
+
case 'rect':
|
|
181
|
+
return {
|
|
182
|
+
width: '140px',
|
|
183
|
+
height: '80px',
|
|
184
|
+
}
|
|
185
|
+
case 'cir':
|
|
186
|
+
return {
|
|
187
|
+
width: '80px',
|
|
188
|
+
height: '80px',
|
|
189
|
+
}
|
|
190
|
+
case 'square':
|
|
191
|
+
return {
|
|
192
|
+
width: '100px',
|
|
193
|
+
height: '100px',
|
|
194
|
+
}
|
|
195
|
+
case 'pro':
|
|
196
|
+
return {
|
|
197
|
+
width: '100%',
|
|
198
|
+
height: '100%',
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
},
|
|
159
203
|
},
|
|
160
204
|
methods: {
|
|
161
205
|
clickFile() {
|
|
@@ -166,13 +210,18 @@ export default {
|
|
|
166
210
|
|
|
167
211
|
async returnFiles(files) {
|
|
168
212
|
let list = []
|
|
213
|
+
const { fileSize } = this.$props
|
|
169
214
|
for (let i = 0; i < files.length; i++) {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
215
|
+
if (files[i].size < fileSize * 1048576) {
|
|
216
|
+
let obj = {
|
|
217
|
+
url: null,
|
|
218
|
+
process: 0,
|
|
219
|
+
file: files[i],
|
|
220
|
+
}
|
|
221
|
+
list.push(obj)
|
|
222
|
+
} else {
|
|
223
|
+
this.$message.error('文件大小超过限制')
|
|
174
224
|
}
|
|
175
|
-
list.push(obj)
|
|
176
225
|
}
|
|
177
226
|
return list
|
|
178
227
|
},
|
|
@@ -180,7 +229,10 @@ export default {
|
|
|
180
229
|
async valueChange(e) {
|
|
181
230
|
let files = e.target.files
|
|
182
231
|
let list = await this.returnFiles(files)
|
|
183
|
-
|
|
232
|
+
if (list.length > 0) {
|
|
233
|
+
this.emitEvent(list)
|
|
234
|
+
}
|
|
235
|
+
|
|
184
236
|
this.$refs.inputFile.value = ''
|
|
185
237
|
},
|
|
186
238
|
|
|
@@ -315,23 +367,13 @@ export default {
|
|
|
315
367
|
}
|
|
316
368
|
}
|
|
317
369
|
}
|
|
318
|
-
|
|
319
|
-
width: 140px;
|
|
320
|
-
height: 80px;
|
|
321
|
-
}
|
|
370
|
+
|
|
322
371
|
.cir {
|
|
323
|
-
width: 80px;
|
|
324
|
-
height: 80px;
|
|
325
372
|
overflow: hidden;
|
|
326
373
|
border-radius: 50%;
|
|
327
374
|
}
|
|
328
|
-
|
|
329
|
-
width: 100px;
|
|
330
|
-
height: 100px;
|
|
331
|
-
}
|
|
375
|
+
|
|
332
376
|
.pro {
|
|
333
|
-
width: 100%;
|
|
334
|
-
height: 100%;
|
|
335
377
|
display: flex;
|
|
336
378
|
align-items: center;
|
|
337
379
|
flex-flow: row nowrap;
|
|
@@ -961,5 +961,17 @@ export default {
|
|
|
961
961
|
box-sizing: border-box;
|
|
962
962
|
padding-top: var(--padding-5);
|
|
963
963
|
}
|
|
964
|
+
|
|
965
|
+
/deep/ .el-table__fixed {
|
|
966
|
+
&::before {
|
|
967
|
+
background-color: transparent !important;
|
|
968
|
+
}
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
/deep/ .el-table__cell {
|
|
972
|
+
.gutter {
|
|
973
|
+
border-color: transparent !important;
|
|
974
|
+
}
|
|
975
|
+
}
|
|
964
976
|
}
|
|
965
977
|
</style>
|
package/src/App.vue
CHANGED
|
@@ -2,7 +2,12 @@
|
|
|
2
2
|
<div id="app">
|
|
3
3
|
<div style="height: 100vh;">
|
|
4
4
|
<test></test>
|
|
5
|
-
<!-- <base-upload v-model="test"></base-upload>
|
|
5
|
+
<!-- <base-upload v-model="test"></base-upload>
|
|
6
|
+
|
|
7
|
+
<base-popover-button
|
|
8
|
+
:buttonIcon="`meixicomponenticon-diqu`"
|
|
9
|
+
v-model="flag"
|
|
10
|
+
></base-popover-button> -->
|
|
6
11
|
</div>
|
|
7
12
|
</div>
|
|
8
13
|
</template>
|