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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meixioacomponent",
3
- "version": "0.3.47",
3
+ "version": "0.3.50",
4
4
  "private": false,
5
5
  "author": "YuRi",
6
6
  "main": "lib/meixioacomponent.umd.min.js",
@@ -141,15 +141,22 @@ export default {
141
141
  .event {
142
142
  cursor: pointer;
143
143
  &:hover {
144
- // background: var(--hover-gray);
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
- <el-button
16
- v-if="!template"
17
- slot="reference"
18
- :size="buttonSize"
19
- :disabled="disabled"
20
- class="popover-button"
21
- :type="module ? 'selected' : 'info'"
22
- @click.stop="iconClick"
23
- :class="{ 'is-single': !buttonText && buttonIcon }"
24
- >
25
- <base-icon
26
- :size="`s`"
27
- :plain="true"
28
- v-if="buttonIcon"
29
- :event="!disabled"
30
- :name="buttonIcon"
31
- class="button-icon"
32
- :iconClass="iconClass"
33
- @iconClick="iconClick"
34
- :color="module ? 'text-white' : 'd'"
35
- ></base-icon>
36
- <span class="inner-span" v-if="buttonText">{{ buttonText }}</span>
37
- </el-button>
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>{{ textNotic }}(最大{{ max }}张)</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
- class="base-upload-item-wrap"
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
- let obj = {
171
- url: null,
172
- process: 0,
173
- file: files[i],
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
- this.emitEvent(list)
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
- .rect {
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
- .square {
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>