mic-org 1.1.0 → 1.1.2
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/README.md +414 -26
- package/dist/mic.css +1 -1
- package/dist/mic.es.js +658 -266
- package/dist/mic.umd.js +2 -2
- package/package.json +1 -1
- package/src/index.d.ts +15 -10
- package/src/styles/mic-variable.scss +1 -7
package/README.md
CHANGED
|
@@ -6,15 +6,281 @@
|
|
|
6
6
|
> 仅限于 vue3 + vite +element-plus + sass 工程中，因为部分组件以及样式有调用
|
|
7
7
|
|
|
8
8
|
---------------------------------
|
|
9
|
+
|
|
10
|
+
## npm引用
|
|
11
|
+
|
|
12
|
+
``` bash
|
|
13
|
+
|
|
14
|
+
npm install mic-org
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## 组件导入
|
|
19
|
+
|
|
20
|
+
``` js
|
|
21
|
+
|
|
22
|
+
import 'mic-org/dist/index.css'; // 组件样式
|
|
23
|
+
import MicOrg from 'mic-org'; // 组件全局导入
|
|
24
|
+
|
|
25
|
+
app.use(MicOrg);
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 普通方法导入
|
|
30
|
+
|
|
31
|
+
``` js
|
|
32
|
+
|
|
33
|
+
import { mic } from 'mic-org'; // 方法导入
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 类方法导入
|
|
38
|
+
|
|
39
|
+
``` js
|
|
40
|
+
|
|
41
|
+
import { Mic } from 'mic-org'; // 方法导入
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## scss变量导入
|
|
46
|
+
|
|
47
|
+
``` js
|
|
48
|
+
|
|
49
|
+
@use "mic-org/css/variable.scss" as *;
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---------------------------------
|
|
54
|
+
|
|
9
55
|
## 组件输出
|
|
10
56
|
| Component | Description |
|
|
11
57
|
| -------------- | ----------- |
|
|
12
|
-
| mic-layout | 用于整体布局 |
|
|
13
58
|
| mic-search | 搜索项的框架 |
|
|
14
59
|
| mic-vac | 搜索项的空白项 |
|
|
15
60
|
| mic-select | 搜索项的选择项 |
|
|
16
61
|
| mic-input | 搜索项的输入项 |
|
|
17
62
|
| mic-date | 搜索项的日期项 |
|
|
63
|
+
| mic-table | 表格数据组件 |
|
|
64
|
+
| mic-dialog | 弹窗form表单组件 |
|
|
65
|
+
|
|
66
|
+
---------------------------------
|
|
67
|
+
|
|
68
|
+
1. **mic-search使用**
|
|
69
|
+
|
|
70
|
+
> props: span
|
|
71
|
+
> 1. span,默认为 4，即：4列, span值为number;
|
|
72
|
+
> 说明：它本身是个搜索项外层框架，用的是grid布局
|
|
73
|
+
|
|
74
|
+
```js
|
|
75
|
+
|
|
76
|
+
<mic-search :span="4"></mic-search>
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
2. **mic-vac使用**
|
|
81
|
+
|
|
82
|
+
> props: span
|
|
83
|
+
> 1. span,默认为 1，即：4列, span值为number;
|
|
84
|
+
> 说明：它本身是为了搜索框内容添加空白列的，也可以在它的标签内添加插槽内容，但是它插槽里的内容是居右对齐的
|
|
85
|
+
|
|
86
|
+
```js
|
|
87
|
+
|
|
88
|
+
<mic-search :span="4">
|
|
89
|
+
<mic-vac :span="2">
|
|
90
|
+
<el-button>查询</el-button>
|
|
91
|
+
<el-button>重置</el-button>
|
|
92
|
+
</mic-vac>
|
|
93
|
+
</mic-search>
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
3. **mic-select使用**
|
|
98
|
+
|
|
99
|
+
> props: span,label,border,width,options (可以把el-select其它的属性/方法全部写入，组件内部使用了$attrs继承)
|
|
100
|
+
> 1. span,默认为 1，即：1列, span值为number;
|
|
101
|
+
> 2. label,搜索项的label项，必填;
|
|
102
|
+
> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
|
|
103
|
+
> 4. width, label项的宽度，默认为 100px
|
|
104
|
+
> 5. options,组件的下拉列表，必填，类型 Array<{label:string,value:any}>;
|
|
105
|
+
|
|
106
|
+
> emits: change
|
|
107
|
+
> 1. change, 触发el-select的change事件后，同步触发此事件
|
|
108
|
+
|
|
109
|
+
```js
|
|
110
|
+
|
|
111
|
+
<mic-search :span="4">
|
|
112
|
+
<mic-search
|
|
113
|
+
label="测试"
|
|
114
|
+
width="100px"
|
|
115
|
+
v-model="data"
|
|
116
|
+
border="1px solid #fff"
|
|
117
|
+
:options="[{label:'男',value:1},{label:'女',value:2}]"
|
|
118
|
+
@change="(val)=>{console.log(val)}"
|
|
119
|
+
/>
|
|
120
|
+
</mic-search>
|
|
121
|
+
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
4. **mic-input使用**
|
|
125
|
+
|
|
126
|
+
> props: span,label,border,width (可以把el-input其它的属性/方法全部写入，组件内部使用了$attrs继承)
|
|
127
|
+
> 1. span,默认为 1，即：1列, span值为number;
|
|
128
|
+
> 2. label,搜索项的label项，必填;
|
|
129
|
+
> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
|
|
130
|
+
> 4. width, label项的宽度，默认为 100px
|
|
131
|
+
|
|
132
|
+
> emits: change, keydown
|
|
133
|
+
> 1. change, 触发el-input的input事件后，同步触发此事件
|
|
134
|
+
> 2. keydown, 触发el-input的keydown.enter事件后，同步触发此事件
|
|
135
|
+
|
|
136
|
+
```js
|
|
137
|
+
|
|
138
|
+
<mic-search :span="4">
|
|
139
|
+
<mic-input
|
|
140
|
+
label="测试"
|
|
141
|
+
width="100px"
|
|
142
|
+
v-model="data"
|
|
143
|
+
border="1px solid #fff"
|
|
144
|
+
@change="(val)=>{console.log(val)}"
|
|
145
|
+
@keydown="(val)=>{console.log(val)}"
|
|
146
|
+
/>
|
|
147
|
+
</mic-search>
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
5. **mic-date使用**
|
|
152
|
+
|
|
153
|
+
> props: span,label,border,width,format (可以把el-date-picker其它的属性/方法全部写入，组件内部使用了$attrs继承)
|
|
154
|
+
> 1. span,默认为 1，即：1列, span值为number;
|
|
155
|
+
> 2. label,搜索项的label项，必填;
|
|
156
|
+
> 3. border,针对如果搜索项整个背景如果是白色，那么可以添加border做搜索项的区分
|
|
157
|
+
> 4. width, label项的宽度，默认为 100px
|
|
158
|
+
> 4. format, format以及value-format 的类型, 必填，取的是 el-date-picker 的format值
|
|
159
|
+
|
|
160
|
+
> emits: change
|
|
161
|
+
> 1. change, 触发el-date-picker的change事件后，同步触发此事件
|
|
162
|
+
|
|
163
|
+
```js
|
|
164
|
+
|
|
165
|
+
<mic-search :span="4">
|
|
166
|
+
<mic-date
|
|
167
|
+
label="测试"
|
|
168
|
+
width="100px"
|
|
169
|
+
format="YYYY-MM-DD"
|
|
170
|
+
border="1px solid #fff"
|
|
171
|
+
v-model="data"
|
|
172
|
+
@change="(val)=>{console.log(val)}"
|
|
173
|
+
/>
|
|
174
|
+
</mic-search>
|
|
175
|
+
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
6. **mic-table使用**
|
|
179
|
+
|
|
180
|
+
> props: tableAttr,tableData,columns,selectSingle,selectKey,disabledCondition,page
|
|
181
|
+
> 1. tableAttr, 给el-table添加一些 mic-table组件中未定义的属性,已经使用v-bind进行了承接
|
|
182
|
+
> 2. tableData, 表格数据 组件内会给每一项增加两个属性：
|
|
183
|
+
> - checked 是否选中;
|
|
184
|
+
> - disabled 是否禁用;
|
|
185
|
+
> 3. columns,表格列,每列有:
|
|
186
|
+
> - type 属性，重构了el-table中的select功能, 值为 select以及 el-table中其它的类型;
|
|
187
|
+
> - attr 属性，给el-table-column 添加mic-table组件中未定义的属性,已经使用v-bind进行了承接;
|
|
188
|
+
> - hidden 属性，值为boolean , 判断列是否展示;
|
|
189
|
+
> - **重点提示：如果要自定义列中的内容，已经配置了插槽，插槽名为attr中的prop值，子组件向父组件传的参数是scope**
|
|
190
|
+
> 4. selectSingle, 是否单选，默认为false，即多选
|
|
191
|
+
> 5. selectKey, 选中项的key值，默认为id
|
|
192
|
+
> 6. disabledCondition, 禁用条件，函数类型，返回true则禁用
|
|
193
|
+
> 7. page, 分页信息，包含total、currentPage、pageSize等属性
|
|
194
|
+
|
|
195
|
+
> emits: selection-change,page-change
|
|
196
|
+
> 1. selection-change,选中项时，触发此方法，把选中项返回
|
|
197
|
+
> 2. page-change, 页码变化时，触发此方法，会把total、currentPage、pageSize都返回
|
|
198
|
+
|
|
199
|
+
> defineExpose: clearSelection,setSelection
|
|
200
|
+
> 1. clearSelection,用 ref绑定父组件中的自组件后，通过此方法清空选中
|
|
201
|
+
> 2. setSelection, 用 ref绑定父组件中的自组件后，通过此方法让指定项默认选中
|
|
202
|
+
|
|
203
|
+
> 按钮插槽 buttonLeft,buttonRight
|
|
204
|
+
> 说明：表格上方一般都要放置按钮，这两个插槽用来放按钮
|
|
205
|
+
|
|
206
|
+
```js
|
|
207
|
+
|
|
208
|
+
<mic-table
|
|
209
|
+
:tableAttr="{height:100}"
|
|
210
|
+
:tableData="[{id:0,name:'张三'}]"
|
|
211
|
+
:columns="[{type:'select',attr:{}},{attr:{prop:'name',label:'姓名'}}]"
|
|
212
|
+
:selectSingle="true"
|
|
213
|
+
selectKey="id"
|
|
214
|
+
:disabledCondition="(items:any)=>items.id==0"
|
|
215
|
+
:page="{
|
|
216
|
+
total: 100,
|
|
217
|
+
currentPage: 1,
|
|
218
|
+
pageSize: 20
|
|
219
|
+
}"
|
|
220
|
+
@selection-change="(val)=>{console.log(val)}"
|
|
221
|
+
@page-change="(val)=>{console.log(val)}"
|
|
222
|
+
>
|
|
223
|
+
<template #buttonLeft>
|
|
224
|
+
<el-button>新建</el-button>
|
|
225
|
+
<el-button>删除</el-button>
|
|
226
|
+
</template>
|
|
227
|
+
<template #buttonRight>
|
|
228
|
+
<el-button>通过</el-button>
|
|
229
|
+
<el-button>拒绝</el-button>
|
|
230
|
+
</template>
|
|
231
|
+
<template #name={ scope }>
|
|
232
|
+
<el-input v-model="scope.row.name"/>
|
|
233
|
+
</template>
|
|
234
|
+
</mic-search>
|
|
235
|
+
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
7. **mic-dialog使用**
|
|
239
|
+
|
|
240
|
+
> props: labelWidth,formList,optionList,rules,cancelText,confirmText(可以把el-dialog其它的属性全部写入，组件内部使用了$attrs继承)
|
|
241
|
+
> 1. labelWidth, form表单label宽度
|
|
242
|
+
> 2. formList, form表单项 它的类型为Array<{module?:string,children:Array<{
|
|
243
|
+
span:number,
|
|
244
|
+
prop:string,
|
|
245
|
+
label:string,
|
|
246
|
+
type?:'input' | 'select' | 'time' | undefined | null,
|
|
247
|
+
attr?:Record<string,any>,
|
|
248
|
+
event?:Record<any,any>,
|
|
249
|
+
}>}>
|
|
250
|
+
> - **重点提示：如果要自定义表单项中的内容，已经配置了插槽，插槽名为children中的prop值，子组件向父组件传的参数是form,attr**
|
|
251
|
+
> 3. optionList, 下拉列表项，它的类型为Record<string,Array<{label:string,value:any}>>
|
|
252
|
+
> 4. rules, form表单校验
|
|
253
|
+
> 5. cancelText, 取消按钮文本
|
|
254
|
+
> 6. confirmText, 确认按钮文本
|
|
255
|
+
|
|
256
|
+
> emits: confirm
|
|
257
|
+
> 1. confirm,确认时回传
|
|
258
|
+
|
|
259
|
+
> defineModel: show,form
|
|
260
|
+
> 1. show, 控制弹窗显隐
|
|
261
|
+
> 2. form, form表单数据
|
|
262
|
+
|
|
263
|
+
```js
|
|
264
|
+
|
|
265
|
+
<mic-dialog
|
|
266
|
+
width="50%"
|
|
267
|
+
title="提示"
|
|
268
|
+
labelWidth="100px"
|
|
269
|
+
:formList="[{module:'个人信息',children:[{span:12,prop:'name',label:'姓名'，type:'select',attr:{},event:{}}]}]"
|
|
270
|
+
:optionList="{name:[{label:'张三',value:1},{label:'李四',value:2}]}"
|
|
271
|
+
:rules="{}"
|
|
272
|
+
v-model:form="{name:1}"
|
|
273
|
+
v-model:show="showDialog"
|
|
274
|
+
cancelText="取消"
|
|
275
|
+
confirmText="确认"
|
|
276
|
+
@conirm="(val)=>{console.log(val)}"
|
|
277
|
+
>
|
|
278
|
+
<template #name={ form,attr,event }>
|
|
279
|
+
<el-input v-model="scope.row.name"/>
|
|
280
|
+
</template>
|
|
281
|
+
</mic-dialog>
|
|
282
|
+
|
|
283
|
+
```
|
|
18
284
|
|
|
19
285
|
---------------------------------
|
|
20
286
|
|
|
@@ -22,62 +288,184 @@
|
|
|
22
288
|
| Function | Description |
|
|
23
289
|
| -------------- | ----------- |
|
|
24
290
|
| reset | 用于重置对象中的内容 |
|
|
25
|
-
| check | 用于校验数据类型
|
|
26
|
-
| isType | 校验是否指定类型
|
|
27
|
-
| capital | 将金额转为汉字金额
|
|
291
|
+
| check | 用于校验数据类型 |
|
|
292
|
+
| isType | 校验是否指定类型 |
|
|
293
|
+
| capital | 将金额转为汉字金额 ，只能处理亿级别的 |
|
|
294
|
+
| equal | 校验两个对象内容是否完全一致 |
|
|
28
295
|
| load | 用于自定义全局/或者局部loading |
|
|
29
296
|
|
|
297
|
+
|
|
30
298
|
---------------------------------
|
|
31
299
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
300
|
+
1. **reset使用**
|
|
301
|
+
|
|
302
|
+
```js
|
|
303
|
+
|
|
304
|
+
import { mic } from 'mic-org';
|
|
305
|
+
const data = ref({ name: '', age: 0 });
|
|
306
|
+
data.value.name = '张三'；
|
|
307
|
+
data.value.age = 10;
|
|
308
|
+
const resetData = () => {
|
|
309
|
+
mic.reset(data.value,{age:0});
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
2. **check使用**
|
|
315
|
+
|
|
316
|
+
```js
|
|
317
|
+
|
|
318
|
+
import { mic } from 'mic-org';
|
|
319
|
+
const data = ref({ name: '', age: 0 });
|
|
320
|
+
mic.check(data.value) //输出结果 Object;
|
|
321
|
+
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
3. **isType使用**
|
|
325
|
+
|
|
326
|
+
```js
|
|
327
|
+
|
|
328
|
+
import { mic } from 'mic-org';
|
|
329
|
+
mic.capital(321.32) //输出结果 “叁佰贰拾壹元贰角壹分”
|
|
330
|
+
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
4. **capital使用**
|
|
334
|
+
|
|
335
|
+
```js
|
|
336
|
+
|
|
337
|
+
import { mic } from 'mic-org';
|
|
338
|
+
const data = ref({ name: '', age: 0 });
|
|
339
|
+
mic.isType(data.value) == 'Object' //输出结果 true
|
|
340
|
+
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
5. **equal使用**
|
|
344
|
+
|
|
345
|
+
```js
|
|
346
|
+
|
|
347
|
+
import { mic } from 'mic-org';
|
|
348
|
+
const data = ref({ name: '', age: 0 });
|
|
349
|
+
const dataB = ref({ name: '1', age: 0 });
|
|
350
|
+
mic.equal(data.value,dataB.value) //输出结果 false
|
|
351
|
+
|
|
352
|
+
```
|
|
38
353
|
|
|
354
|
+
6. **load使用**
|
|
355
|
+
|
|
356
|
+
> 1. className没值的话，就是全局loading
|
|
357
|
+
> 2. loadStyle 可以定义loading的背景颜色，也可以定义loading的颜色
|
|
358
|
+
|
|
359
|
+
```js
|
|
360
|
+
|
|
361
|
+
import { mic } from 'mic-org';
|
|
362
|
+
const funA = ()=>{
|
|
363
|
+
mic.load(()=>{
|
|
364
|
+
console.log('1111')
|
|
365
|
+
},{className:'',loadStyle:{bgColor:'#fff',color:'#005eba'}})()
|
|
366
|
+
}
|
|
367
|
+
const funB = mic.load(()=>{
|
|
368
|
+
console.log('2222')
|
|
369
|
+
},{className:''})
|
|
370
|
+
|
|
371
|
+
```
|
|
39
372
|
---------------------------------
|
|
40
373
|
|
|
41
|
-
##
|
|
374
|
+
## 类输出
|
|
42
375
|
| Function | Description |
|
|
43
376
|
| -------------- | ----------- |
|
|
44
|
-
|
|
|
377
|
+
| domHeight | 获取想要的元素的宽/高，也可通过别的元素的加/减计算得来,对应的是像素值 |
|
|
45
378
|
|
|
46
379
|
---------------------------------
|
|
47
380
|
|
|
48
|
-
|
|
381
|
+
1. **domHeight使用**
|
|
49
382
|
|
|
50
|
-
|
|
383
|
+
> 1. 实例入参类型 Array<{name:string,type:'+' | '-'}>
|
|
384
|
+
> 2. 获取宽度/高度时， 需要在后面加个.value，width/height是reactive对象，为了做到响应式，里面包裹了value
|
|
51
385
|
|
|
52
|
-
|
|
386
|
+
```js
|
|
387
|
+
|
|
388
|
+
import { Mic } from 'mic-org';
|
|
389
|
+
const DOMA = new Mic.domHeight([
|
|
390
|
+
{
|
|
391
|
+
name:'.boxa',
|
|
392
|
+
type:'+',
|
|
393
|
+
}
|
|
394
|
+
])
|
|
395
|
+
console.log(DOMA.height.value) //获取DOMA的高度，像素单位
|
|
396
|
+
console.log(DOMA.width.value) //获取DOMA的宽度，像素单位
|
|
397
|
+
|
|
398
|
+
//假设，A包裹了B元素和C元素，此时想要获得C元素的高度/宽度
|
|
399
|
+
const DOMC = new Mic.domHeight([
|
|
400
|
+
{
|
|
401
|
+
name:'.boxa',
|
|
402
|
+
type:'+',
|
|
403
|
+
},{
|
|
404
|
+
name:'.boxb',
|
|
405
|
+
type:'-',
|
|
406
|
+
}
|
|
407
|
+
])
|
|
408
|
+
// B元素和C元素上下排列，要获取高度，直接DOMC.height.value就可以
|
|
409
|
+
console.log(DOMC.height.value)
|
|
410
|
+
// B元素和C元素左右排列，要获取宽度，直接DOMC.width.value就可以
|
|
411
|
+
console.log(DOMC.width.value)
|
|
53
412
|
|
|
54
413
|
```
|
|
414
|
+
|
|
415
|
+
---------------------------------
|
|
416
|
+
|
|
417
|
+
## Array输出
|
|
418
|
+
| Function | Description |
|
|
419
|
+
| -------------- | ----------- |
|
|
420
|
+
| equal | 校验数组(子集为普通对象)中,指定的字段的值是否一致 |
|
|
421
|
+
| deepIncludes | 校验数组(子集为普通对象)中,是否包含某个字段对应的值 |
|
|
55
422
|
|
|
56
423
|
---------------------------------
|
|
57
424
|
|
|
58
|
-
|
|
425
|
+
1. **equal使用**
|
|
59
426
|
|
|
60
|
-
```
|
|
427
|
+
```js
|
|
61
428
|
|
|
62
|
-
|
|
63
|
-
import mic from 'mic-org'; // 组件全局导入
|
|
429
|
+
let a = [{id:0,name:'张三'},{id:1,name:'张三'}];
|
|
64
430
|
|
|
65
|
-
|
|
431
|
+
a.equal('name') // 输出结果 true
|
|
432
|
+
a.equal(['id','name']) // 输出结果 false
|
|
66
433
|
|
|
67
434
|
```
|
|
68
435
|
|
|
69
|
-
|
|
436
|
+
2. **deepIncludes使用**
|
|
70
437
|
|
|
71
|
-
|
|
438
|
+
```js
|
|
72
439
|
|
|
440
|
+
let a = [{id:0,name:'张三'},{id:1,name:'张三'}];
|
|
441
|
+
|
|
442
|
+
a.deepIncludes({name:'张三'}) // 输出结果 true
|
|
443
|
+
a.deepIncludes({id:1,name:'张三'}) // 输出结果 true
|
|
444
|
+
a.deepIncludes({id:2,name:'张三'}) // 输出结果 false
|
|
445
|
+
|
|
73
446
|
```
|
|
74
447
|
|
|
75
|
-
|
|
448
|
+
---------------------------------
|
|
76
449
|
|
|
77
|
-
|
|
450
|
+
## Math输出
|
|
451
|
+
| Function | Description |
|
|
452
|
+
| -------------- | ----------- |
|
|
453
|
+
| exact | 用于解决 加/减/乘/除 的计算精度问题 |
|
|
454
|
+
|
|
455
|
+
---------------------------------
|
|
78
456
|
|
|
457
|
+
1. **exact使用**
|
|
458
|
+
|
|
459
|
+
```js
|
|
460
|
+
|
|
461
|
+
Math.exact(0.1,0.2,'+') //输出 0.3，而不是 0.30000000000000004
|
|
462
|
+
|
|
79
463
|
```
|
|
80
464
|
|
|
81
|
-
|
|
465
|
+
---------------------------------
|
|
466
|
+
|
|
467
|
+
## 版本 1.1.2
|
|
82
468
|
|
|
83
|
-
|
|
469
|
+
- 1.优化load方法
|
|
470
|
+
- 2.优化misc-dialog组件
|
|
471
|
+
- 3.新增domHeight 类，获取元素的像素宽/高
|
package/dist/mic.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:root{--mic-search-color:#333;--mic-search-background:#fff;--mic-search-interval:1px solid #ddd;--mic-menu-width:200px;--mic-header-height:60px;--mic-footer-height:40px}.f-10[data-v-bb327344]{font-size:10px}.f-11[data-v-bb327344]{font-size:11px}.f-12[data-v-bb327344]{font-size:12px}.f-13[data-v-bb327344]{font-size:13px}.f-14[data-v-bb327344]{font-size:14px}.f-15[data-v-bb327344]{font-size:15px}.f-16[data-v-bb327344]{font-size:16px}.f-17[data-v-bb327344]{font-size:17px}.f-18[data-v-bb327344]{font-size:18px}.f-19[data-v-bb327344]{font-size:19px}.f-20[data-v-bb327344]{font-size:20px}.f-21[data-v-bb327344]{font-size:21px}.f-22[data-v-bb327344]{font-size:22px}.f-23[data-v-bb327344]{font-size:23px}.f-24[data-v-bb327344]{font-size:24px}.f-25[data-v-bb327344]{font-size:25px}.f-26[data-v-bb327344]{font-size:26px}.f-27[data-v-bb327344]{font-size:27px}.f-28[data-v-bb327344]{font-size:28px}.f-29[data-v-bb327344]{font-size:29px}.f-30[data-v-bb327344]{font-size:30px}.f-31[data-v-bb327344]{font-size:31px}.f-32[data-v-bb327344]{font-size:32px}.f-33[data-v-bb327344]{font-size:33px}.f-34[data-v-bb327344]{font-size:34px}.f-35[data-v-bb327344]{font-size:35px}.f-36[data-v-bb327344]{font-size:36px}.f-37[data-v-bb327344]{font-size:37px}.f-38[data-v-bb327344]{font-size:38px}.f-39[data-v-bb327344]{font-size:39px}.f-40[data-v-bb327344]{font-size:40px}.f-41[data-v-bb327344]{font-size:41px}.f-42[data-v-bb327344]{font-size:42px}.f-43[data-v-bb327344]{font-size:43px}.f-44[data-v-bb327344]{font-size:44px}.f-45[data-v-bb327344]{font-size:45px}.f-46[data-v-bb327344]{font-size:46px}.f-47[data-v-bb327344]{font-size:47px}.f-48[data-v-bb327344]{font-size:48px}.f-49[data-v-bb327344]{font-size:49px}.f-50[data-v-bb327344]{font-size:50px}.f-51[data-v-bb327344]{font-size:51px}.f-52[data-v-bb327344]{font-size:52px}.f-53[data-v-bb327344]{font-size:53px}.f-54[data-v-bb327344]{font-size:54px}.f-55[data-v-bb327344]{font-size:55px}.f-56[data-v-bb327344]{font-size:56px}.f-57[data-v-bb327344]{font-size:57px}.f-58[data-v-bb327344]{font-size:58px}.f-59[data-v-bb327344]{font-size:59px}.f-60[data-v-bb327344]{font-size:60px}.mic-date[data-v-bb327344]{box-sizing:border-box;width:100%;height:100%;border-radius:4px;overflow:hidden;background-color:var(--mic-search-background);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.mic-date-left[data-v-bb327344]{height:70%;border-right:var(--mic-search-interval);color:var(--mic-search-color);padding:0 6px;line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:center}.mic-date-right[data-v-bb327344]{flex:1}.mic-date[data-v-bb327344] .el-date-editor{width:100%!important;height:100%!important}.mic-date[data-v-bb327344] .el-input__wrapper{box-shadow:none;padding:1px 6px}.mic-date[data-v-bb327344] .el-range__icon,.mic-date[data-v-bb327344] .el-input__prefix{display:none}.mic-date[data-v-bb327344] .is-focus{box-shadow:none!important}.f-10[data-v-d35be4c9]{font-size:10px}.f-11[data-v-d35be4c9]{font-size:11px}.f-12[data-v-d35be4c9]{font-size:12px}.f-13[data-v-d35be4c9]{font-size:13px}.f-14[data-v-d35be4c9]{font-size:14px}.f-15[data-v-d35be4c9]{font-size:15px}.f-16[data-v-d35be4c9]{font-size:16px}.f-17[data-v-d35be4c9]{font-size:17px}.f-18[data-v-d35be4c9]{font-size:18px}.f-19[data-v-d35be4c9]{font-size:19px}.f-20[data-v-d35be4c9]{font-size:20px}.f-21[data-v-d35be4c9]{font-size:21px}.f-22[data-v-d35be4c9]{font-size:22px}.f-23[data-v-d35be4c9]{font-size:23px}.f-24[data-v-d35be4c9]{font-size:24px}.f-25[data-v-d35be4c9]{font-size:25px}.f-26[data-v-d35be4c9]{font-size:26px}.f-27[data-v-d35be4c9]{font-size:27px}.f-28[data-v-d35be4c9]{font-size:28px}.f-29[data-v-d35be4c9]{font-size:29px}.f-30[data-v-d35be4c9]{font-size:30px}.f-31[data-v-d35be4c9]{font-size:31px}.f-32[data-v-d35be4c9]{font-size:32px}.f-33[data-v-d35be4c9]{font-size:33px}.f-34[data-v-d35be4c9]{font-size:34px}.f-35[data-v-d35be4c9]{font-size:35px}.f-36[data-v-d35be4c9]{font-size:36px}.f-37[data-v-d35be4c9]{font-size:37px}.f-38[data-v-d35be4c9]{font-size:38px}.f-39[data-v-d35be4c9]{font-size:39px}.f-40[data-v-d35be4c9]{font-size:40px}.f-41[data-v-d35be4c9]{font-size:41px}.f-42[data-v-d35be4c9]{font-size:42px}.f-43[data-v-d35be4c9]{font-size:43px}.f-44[data-v-d35be4c9]{font-size:44px}.f-45[data-v-d35be4c9]{font-size:45px}.f-46[data-v-d35be4c9]{font-size:46px}.f-47[data-v-d35be4c9]{font-size:47px}.f-48[data-v-d35be4c9]{font-size:48px}.f-49[data-v-d35be4c9]{font-size:49px}.f-50[data-v-d35be4c9]{font-size:50px}.f-51[data-v-d35be4c9]{font-size:51px}.f-52[data-v-d35be4c9]{font-size:52px}.f-53[data-v-d35be4c9]{font-size:53px}.f-54[data-v-d35be4c9]{font-size:54px}.f-55[data-v-d35be4c9]{font-size:55px}.f-56[data-v-d35be4c9]{font-size:56px}.f-57[data-v-d35be4c9]{font-size:57px}.f-58[data-v-d35be4c9]{font-size:58px}.f-59[data-v-d35be4c9]{font-size:59px}.f-60[data-v-d35be4c9]{font-size:60px}.mic-input[data-v-d35be4c9]{box-sizing:border-box;width:100%;height:100%;border-radius:4px;overflow:hidden;background-color:var(--mic-search-background);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.mic-input-left[data-v-d35be4c9]{height:70%;border-right:var(--mic-search-interval);color:var(--mic-search-color);padding:0 6px;line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:center}.mic-input-right[data-v-d35be4c9]{flex:1}.mic-input[data-v-d35be4c9] .el-input{width:100%!important;height:100%!important}.mic-input[data-v-d35be4c9] .el-input__wrapper{box-shadow:none;padding:1px 6px}.mic-input[data-v-d35be4c9] .el-input-group__append{border:none;background:none;box-shadow:none}.mic-input[data-v-d35be4c9] .el-input.is-disabled .el-input__wrapper{background:none}.mic-layout[data-v-9993530d]{display:grid;background-color:#f1f2f6;grid-template-columns:var(--mic-menu-width) calc(100vw - var(--mic-menu-width));grid-template-rows:var(--mic-header-height) calc(100vh - var(--mic-header-height) - var(--mic-footer-height)) var(--mic-footer-height);grid-template-areas:"header header" "menu contain" "menu footer"}.mic-layout-header[data-v-9993530d]{grid-area:header}.mic-layout-contain[data-v-9993530d]{grid-area:contain;overflow:auto}.mic-layout-menu[data-v-9993530d]{grid-area:menu;overflow:auto}.mic-layout-footer[data-v-9993530d]{grid-area:footer}.mic-search-box[data-v-9003d058]{width:100%;display:grid;grid-gap:14px 12px;grid-auto-rows:34px;grid-auto-flow:row dense}.f-10[data-v-fb2f025a]{font-size:10px}.f-11[data-v-fb2f025a]{font-size:11px}.f-12[data-v-fb2f025a]{font-size:12px}.f-13[data-v-fb2f025a]{font-size:13px}.f-14[data-v-fb2f025a]{font-size:14px}.f-15[data-v-fb2f025a]{font-size:15px}.f-16[data-v-fb2f025a]{font-size:16px}.f-17[data-v-fb2f025a]{font-size:17px}.f-18[data-v-fb2f025a]{font-size:18px}.f-19[data-v-fb2f025a]{font-size:19px}.f-20[data-v-fb2f025a]{font-size:20px}.f-21[data-v-fb2f025a]{font-size:21px}.f-22[data-v-fb2f025a]{font-size:22px}.f-23[data-v-fb2f025a]{font-size:23px}.f-24[data-v-fb2f025a]{font-size:24px}.f-25[data-v-fb2f025a]{font-size:25px}.f-26[data-v-fb2f025a]{font-size:26px}.f-27[data-v-fb2f025a]{font-size:27px}.f-28[data-v-fb2f025a]{font-size:28px}.f-29[data-v-fb2f025a]{font-size:29px}.f-30[data-v-fb2f025a]{font-size:30px}.f-31[data-v-fb2f025a]{font-size:31px}.f-32[data-v-fb2f025a]{font-size:32px}.f-33[data-v-fb2f025a]{font-size:33px}.f-34[data-v-fb2f025a]{font-size:34px}.f-35[data-v-fb2f025a]{font-size:35px}.f-36[data-v-fb2f025a]{font-size:36px}.f-37[data-v-fb2f025a]{font-size:37px}.f-38[data-v-fb2f025a]{font-size:38px}.f-39[data-v-fb2f025a]{font-size:39px}.f-40[data-v-fb2f025a]{font-size:40px}.f-41[data-v-fb2f025a]{font-size:41px}.f-42[data-v-fb2f025a]{font-size:42px}.f-43[data-v-fb2f025a]{font-size:43px}.f-44[data-v-fb2f025a]{font-size:44px}.f-45[data-v-fb2f025a]{font-size:45px}.f-46[data-v-fb2f025a]{font-size:46px}.f-47[data-v-fb2f025a]{font-size:47px}.f-48[data-v-fb2f025a]{font-size:48px}.f-49[data-v-fb2f025a]{font-size:49px}.f-50[data-v-fb2f025a]{font-size:50px}.f-51[data-v-fb2f025a]{font-size:51px}.f-52[data-v-fb2f025a]{font-size:52px}.f-53[data-v-fb2f025a]{font-size:53px}.f-54[data-v-fb2f025a]{font-size:54px}.f-55[data-v-fb2f025a]{font-size:55px}.f-56[data-v-fb2f025a]{font-size:56px}.f-57[data-v-fb2f025a]{font-size:57px}.f-58[data-v-fb2f025a]{font-size:58px}.f-59[data-v-fb2f025a]{font-size:59px}.f-60[data-v-fb2f025a]{font-size:60px}.mic-select[data-v-fb2f025a]{box-sizing:border-box;width:100%;height:100%;border-radius:4px;overflow:hidden;background-color:var(--mic-search-background);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.mic-select-left[data-v-fb2f025a]{height:70%;border-right:var(--mic-search-interval);color:var(--mic-search-color);padding:0 6px;line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:center}.mic-select-right[data-v-fb2f025a]{flex:1}.mic-select[data-v-fb2f025a] .el-select{width:100%!important;height:100%!important}.mic-select[data-v-fb2f025a] .el-select__wrapper{box-shadow:none;padding:1px 6px}.mic-select[data-v-fb2f025a] .is-focus,.mic-select[data-v-fb2f025a] .is-hovering{box-shadow:none!important}.f-10[data-v-101c3479]{font-size:10px}.f-11[data-v-101c3479]{font-size:11px}.f-12[data-v-101c3479]{font-size:12px}.f-13[data-v-101c3479]{font-size:13px}.f-14[data-v-101c3479]{font-size:14px}.f-15[data-v-101c3479]{font-size:15px}.f-16[data-v-101c3479]{font-size:16px}.f-17[data-v-101c3479]{font-size:17px}.f-18[data-v-101c3479]{font-size:18px}.f-19[data-v-101c3479]{font-size:19px}.f-20[data-v-101c3479]{font-size:20px}.f-21[data-v-101c3479]{font-size:21px}.f-22[data-v-101c3479]{font-size:22px}.f-23[data-v-101c3479]{font-size:23px}.f-24[data-v-101c3479]{font-size:24px}.f-25[data-v-101c3479]{font-size:25px}.f-26[data-v-101c3479]{font-size:26px}.f-27[data-v-101c3479]{font-size:27px}.f-28[data-v-101c3479]{font-size:28px}.f-29[data-v-101c3479]{font-size:29px}.f-30[data-v-101c3479]{font-size:30px}.f-31[data-v-101c3479]{font-size:31px}.f-32[data-v-101c3479]{font-size:32px}.f-33[data-v-101c3479]{font-size:33px}.f-34[data-v-101c3479]{font-size:34px}.f-35[data-v-101c3479]{font-size:35px}.f-36[data-v-101c3479]{font-size:36px}.f-37[data-v-101c3479]{font-size:37px}.f-38[data-v-101c3479]{font-size:38px}.f-39[data-v-101c3479]{font-size:39px}.f-40[data-v-101c3479]{font-size:40px}.f-41[data-v-101c3479]{font-size:41px}.f-42[data-v-101c3479]{font-size:42px}.f-43[data-v-101c3479]{font-size:43px}.f-44[data-v-101c3479]{font-size:44px}.f-45[data-v-101c3479]{font-size:45px}.f-46[data-v-101c3479]{font-size:46px}.f-47[data-v-101c3479]{font-size:47px}.f-48[data-v-101c3479]{font-size:48px}.f-49[data-v-101c3479]{font-size:49px}.f-50[data-v-101c3479]{font-size:50px}.f-51[data-v-101c3479]{font-size:51px}.f-52[data-v-101c3479]{font-size:52px}.f-53[data-v-101c3479]{font-size:53px}.f-54[data-v-101c3479]{font-size:54px}.f-55[data-v-101c3479]{font-size:55px}.f-56[data-v-101c3479]{font-size:56px}.f-57[data-v-101c3479]{font-size:57px}.f-58[data-v-101c3479]{font-size:58px}.f-59[data-v-101c3479]{font-size:59px}.f-60[data-v-101c3479]{font-size:60px}.mic-vac[data-v-101c3479]{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}
|
|
1
|
+
@charset "UTF-8";:root{--mic-theme-color:#005eba;--mic-search-color:#333;--mic-search-background:#fff;--mic-search-interval:1px solid #ddd}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mic-loader{animation:spin 2s linear infinite}@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes custom-spin-move{to{opacity:1}}.circular{display:inline;height:30px;width:30px;animation:loading-rotate 2s linear infinite}.loading-path .dot1{transform:translate(3.75px,3.75px);fill:var(--mic-theme-color);animation:custom-spin-move 1s infinite linear alternate;opacity:.3}.loading-path .dot2{transform:translate(calc(100% - 3.75px),3.75px);fill:var(--mic-theme-color);animation:custom-spin-move 1s infinite linear alternate;opacity:.3;animation-delay:.4s}.loading-path .dot3{transform:translate(3.75px,calc(100% - 3.75px));fill:var(--mic-theme-color);animation:custom-spin-move 1s infinite linear alternate;opacity:.3;animation-delay:1.2s}.loading-path .dot4{transform:translate(calc(100% - 3.75px),calc(100% - 3.75px));fill:var(--mic-theme-color);animation:custom-spin-move 1s infinite linear alternate;opacity:.3;animation-delay:.8s}.mic-search-box{width:100%;display:grid;grid-gap:14px 12px;grid-auto-rows:34px;grid-auto-flow:row dense}.mic-search-vac{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}.mic-search-item{width:100%;height:100%;border-radius:4px;overflow:hidden;background-color:var(--mic-search-background);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.mic-search-item-left{height:70%;border-right:var(--mic-search-interval);color:var(--mic-search-color);padding:0 6px;line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:center}.mic-search-item-right{flex:1}.mic-search-item .el-date-editor,.mic-search-item .el-input,.mic-search-item .el-select{width:100%!important;height:100%!important}.mic-search-item .el-input__wrapper,.mic-search-item .el-select__wrapper{box-shadow:none;padding:1px 6px}.mic-search-item .el-input-group__append{border:none;background:none;box-shadow:none}.mic-search-item .el-input.is-disabled .el-input__wrapper{background:none}.mic-search-item .el-range__icon,.mic-search-item .el-input__prefix{display:none}.mic-search-item .is-focus,.mic-search-item .is-hovering{box-shadow:none!important}.mic-table{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;background-color:#fff}.mic-table-button{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.mic-table-button-left,.mic-table-button-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}.mic-table-button-left .el-button+.el-button,.mic-table-button-right .el-button+.el-button{margin:0!important}.mic-table-cont{margin-top:10px;width:100%}.mic-table-page{width:100%;margin-top:10px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.mic-table-page .el-pager .number{border:1px solid #fff;margin-left:10px}.mic-table-page .el-pager .number:last-child{margin-right:10px}.mic-table-page .el-pager .active{border:1px solid #005eba!important;color:#005eba!important}.mic-dialog-module{position:relative;padding-left:12px;font-size:16px;font-weight:700;margin-bottom:10px}.mic-dialog-module:before{content:"";width:4px;height:18px;border-radius:2px;background-color:#1a6bf3;position:absolute;left:0;top:2px}
|