eoss-ui 0.5.75 → 0.5.76

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.
Files changed (58) hide show
  1. package/lib/button-group.js +26 -0
  2. package/lib/button.js +26 -0
  3. package/lib/checkbox-group.js +26 -0
  4. package/lib/data-table-form.js +26 -0
  5. package/lib/data-table.js +46 -16
  6. package/lib/date-picker.js +26 -0
  7. package/lib/dialog.js +26 -0
  8. package/lib/eoss-ui.common.js +369 -263
  9. package/lib/flow-group.js +26 -0
  10. package/lib/flow-list.js +37 -8
  11. package/lib/flow.js +26 -0
  12. package/lib/form.js +26 -0
  13. package/lib/handle-user.js +26 -0
  14. package/lib/handler.js +26 -0
  15. package/lib/index.js +1 -1
  16. package/lib/input-number.js +26 -0
  17. package/lib/input.js +26 -0
  18. package/lib/login.js +175 -122
  19. package/lib/main.js +26 -0
  20. package/lib/nav.js +26 -0
  21. package/lib/page.js +26 -0
  22. package/lib/player.js +26 -0
  23. package/lib/qr-code.js +79 -36
  24. package/lib/radio-group.js +26 -0
  25. package/lib/retrial-auth.js +26 -0
  26. package/lib/select-ganged.js +26 -0
  27. package/lib/select.js +26 -0
  28. package/lib/selector-panel.js +26 -0
  29. package/lib/selector.js +26 -0
  30. package/lib/sizer.js +26 -0
  31. package/lib/steps.js +26 -0
  32. package/lib/switch.js +26 -0
  33. package/lib/table-form.js +26 -0
  34. package/lib/tabs.js +26 -0
  35. package/lib/theme-chalk/index.css +1 -1
  36. package/lib/theme-chalk/login.css +1 -1
  37. package/lib/tips.js +26 -0
  38. package/lib/toolbar.js +3 -2
  39. package/lib/tree-group.js +60 -34
  40. package/lib/tree.js +41 -3
  41. package/lib/upload.js +26 -0
  42. package/lib/utils/util.js +26 -0
  43. package/lib/wujie.js +26 -0
  44. package/lib/wxlogin.js +54 -12
  45. package/package.json +2 -2
  46. package/packages/data-table/src/main.vue +15 -14
  47. package/packages/flow-list/src/main.vue +63 -41
  48. package/packages/login/src/main.vue +32 -17
  49. package/packages/qr-code/src/main.vue +48 -37
  50. package/packages/theme-chalk/lib/index.css +1 -1
  51. package/packages/theme-chalk/lib/login.css +1 -1
  52. package/packages/theme-chalk/src/login.scss +912 -430
  53. package/packages/toolbar/src/main.vue +16 -6
  54. package/packages/tree/src/main.vue +13 -1
  55. package/packages/tree-group/src/main.vue +24 -37
  56. package/packages/wxlogin/src/main.vue +30 -12
  57. package/src/index.js +1 -1
  58. package/src/utils/util.js +26 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eoss-ui",
3
- "version": "0.5.75",
3
+ "version": "0.5.76",
4
4
  "description": "eoss内部业务组件",
5
5
  "main": "lib/eoss-ui.common.js",
6
6
  "files": [
@@ -97,7 +97,7 @@
97
97
  "cp-cli": "^1.0.2",
98
98
  "cross-env": "^3.1.3",
99
99
  "css-loader": "^2.1.0",
100
- "eoss-element": "^0.2.100",
100
+ "eoss-element": "^0.2.102",
101
101
  "es6-promise": "^4.0.5",
102
102
  "eslint": "4.18.2",
103
103
  "eslint-config-elemefe": "0.1.1",
@@ -447,7 +447,8 @@ export default {
447
447
  pageSize: 20,
448
448
  totalCount: 0
449
449
  },
450
- wheres: {},
450
+ searchWhere: {},
451
+ advanceWhere: {},
451
452
  tableHeight: 'auto',
452
453
  styles: {},
453
454
  selected: null,
@@ -460,6 +461,9 @@ export default {
460
461
  };
461
462
  },
462
463
  computed: {
464
+ wheres() {
465
+ return { ...this.searchWhere, ...this.advanceWhere };
466
+ },
463
467
  params() {
464
468
  return {
465
469
  ...(this.param || {}),
@@ -1408,7 +1412,7 @@ export default {
1408
1412
  this.$emit('next', res);
1409
1413
  },
1410
1414
  hanleSearch(data) {
1411
- this.wheres =
1415
+ this.searchWhere =
1412
1416
  this.response !== undefined
1413
1417
  ? this.response({
1414
1418
  type: 'search',
@@ -1418,37 +1422,34 @@ export default {
1418
1422
  if (this.url && this.executeSearch) {
1419
1423
  this.getTableData({ where: this.wheres });
1420
1424
  }
1421
- this.$emit('search', this.wheres);
1425
+ this.$emit('search', this.searchWhere);
1422
1426
  },
1423
1427
  hanleReset() {
1428
+ this.searchWhere = {};
1429
+ this.advanceWhere = {};
1424
1430
  if (this.url) {
1425
- this.wheres = {};
1426
1431
  this.getTableData();
1427
1432
  }
1428
1433
  this.$emit('reset', this.params);
1429
1434
  },
1430
1435
  hanleSubmit({ data, show }) {
1431
- let where =
1436
+ this.advanceWhere =
1432
1437
  this.response !== undefined
1433
1438
  ? this.response({
1434
1439
  type: 'filter',
1435
1440
  data: JSON.parse(JSON.stringify(data))
1436
1441
  })
1437
1442
  : data;
1438
- this.wheres = {
1439
- ...this.wheres,
1440
- ...where
1441
- };
1442
1443
  if (this.url && this.executeFilter) {
1443
1444
  this.getTableData({ where: this.wheres });
1444
1445
  }
1445
- this.$emit('submit', { data: where, where: this.wheres, show });
1446
+ this.$emit('submit', {
1447
+ data: this.advanceWhere,
1448
+ where: this.wheres,
1449
+ show
1450
+ });
1446
1451
  },
1447
1452
  hanleCancel() {
1448
- // if (this.url && JSON.stringify(this.wheres) !== '{}') {
1449
- // this.wheres = {};
1450
- // this.getTableData();
1451
- // }
1452
1453
  this.$emit('cancel', this.params);
1453
1454
  },
1454
1455
  handleTabs({ item, index }) {
@@ -8,7 +8,10 @@
8
8
  (item.type == 'splitReading' &&
9
9
  splitReadingData &&
10
10
  splitReadingData.length > 0) ||
11
- (item.type == 'preset' && presetData && presetData.length > 0 && currentUserHasPresetInfoAuth) ||
11
+ (item.type == 'preset' &&
12
+ presetData &&
13
+ presetData.length > 0 &&
14
+ currentUserHasPresetInfoAuth) ||
12
15
  (item.type != 'splitReading' && item.type != 'preset')
13
16
  "
14
17
  >
@@ -128,7 +131,7 @@ export default {
128
131
  pressTableList: [],
129
132
  currentPage: 1,
130
133
  pageSize: 20,
131
- currentUserHasPresetInfoAuth:false,
134
+ currentUserHasPresetInfoAuth: false,
132
135
  pressThead: [
133
136
  {
134
137
  title: '催办节点',
@@ -321,7 +324,7 @@ export default {
321
324
  label: '经办部门',
322
325
  field: 'deptid',
323
326
  align: 'center',
324
- key:'jbbm',
327
+ key: 'jbbm',
325
328
  showOverflowTooltip: true,
326
329
  width: 150
327
330
  },
@@ -329,7 +332,7 @@ export default {
329
332
  label: '步骤',
330
333
  field: 'itemname',
331
334
  align: 'center',
332
- key:'bz',
335
+ key: 'bz',
333
336
  showOverflowTooltip: true,
334
337
  width: 110
335
338
  },
@@ -337,7 +340,7 @@ export default {
337
340
  label: '办理人',
338
341
  field: 'userName',
339
342
  align: 'center',
340
- key:'blr',
343
+ key: 'blr',
341
344
  showOverflowTooltip: true,
342
345
  width: 110
343
346
  },
@@ -346,13 +349,13 @@ export default {
346
349
  field: 'deptName',
347
350
  align: 'center',
348
351
  showOverflowTooltip: true,
349
- key:'blrbm',
352
+ key: 'blrbm',
350
353
  width: 110
351
354
  },
352
355
  {
353
356
  label: '状态',
354
357
  field: 'pendstate',
355
- key:'zt',
358
+ key: 'zt',
356
359
  align: 'center',
357
360
  showOverflowTooltip: true,
358
361
  width: 80,
@@ -375,20 +378,25 @@ export default {
375
378
  field: 'doresult',
376
379
  align: 'center',
377
380
  showOverflowTooltip: true,
378
- key:'blyj',
381
+ key: 'blyj',
379
382
  render: (h, params) => {
380
- return h(
381
- 'span',
382
- {},
383
- params.row.doresult || params.row.handleInfo
384
- );
383
+ return h('span', {}, [
384
+ params.row.doresult
385
+ ? params.row.doresult + (params.row.handleInfo ? '&' : '')
386
+ : '',
387
+ h(
388
+ 'span',
389
+ { style: { color: '#A5A5A5', marginLeft: '2px' } },
390
+ params.row.handleInfo || ''
391
+ )
392
+ ]);
385
393
  }
386
394
  },
387
395
  {
388
396
  label: '验签',
389
397
  field: 'authTypeStr',
390
398
  align: 'center',
391
- key:'yq',
399
+ key: 'yq',
392
400
  showOverflowTooltip: true,
393
401
  width: 70,
394
402
  render: (h, params) => {
@@ -401,7 +409,7 @@ export default {
401
409
  },
402
410
  {
403
411
  label: '附件',
404
- key:'fj',
412
+ key: 'fj',
405
413
  field: 'hasAdjunct',
406
414
  align: 'center',
407
415
  showOverflowTooltip: true,
@@ -423,14 +431,16 @@ export default {
423
431
  label: '时间',
424
432
  field: 'doetime',
425
433
  align: 'center',
426
- key:'sj',
434
+ key: 'sj',
427
435
  showOverflowTooltip: true,
428
436
  width: 150,
429
437
  render: (h, params) => {
430
438
  return h(
431
439
  'span',
432
440
  {},
433
- params.row.doetime ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm') : ''
441
+ params.row.doetime
442
+ ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
443
+ : ''
434
444
  );
435
445
  }
436
446
  },
@@ -438,7 +448,7 @@ export default {
438
448
  label: '代办人',
439
449
  field: 'douserid',
440
450
  align: 'center',
441
- key:'dbr',
451
+ key: 'dbr',
442
452
  showOverflowTooltip: true,
443
453
  width: 80,
444
454
  hide: _that.flowTableInfo.hasAgent != '1'
@@ -447,7 +457,7 @@ export default {
447
457
  label: '催办',
448
458
  field: 'pressTimes',
449
459
  align: 'center',
450
- key:'cb',
460
+ key: 'cb',
451
461
  showOverflowTooltip: true,
452
462
  width: 150,
453
463
  render: (h, params) => {
@@ -484,7 +494,7 @@ export default {
484
494
  {
485
495
  label: '经办部门',
486
496
  field: 'deptid',
487
- key:'jbbm',
497
+ key: 'jbbm',
488
498
  align: 'center',
489
499
  showOverflowTooltip: true,
490
500
  width: 150
@@ -493,7 +503,7 @@ export default {
493
503
  label: '步骤',
494
504
  field: 'itemname',
495
505
  align: 'center',
496
- key:'bz',
506
+ key: 'bz',
497
507
  showOverflowTooltip: true,
498
508
  width: 110
499
509
  },
@@ -501,7 +511,7 @@ export default {
501
511
  label: '办理人',
502
512
  field: 'userName',
503
513
  align: 'center',
504
- key:'blr',
514
+ key: 'blr',
505
515
  showOverflowTooltip: true,
506
516
  width: 110
507
517
  },
@@ -509,7 +519,7 @@ export default {
509
519
  label: '状态',
510
520
  field: 'pendstate',
511
521
  align: 'center',
512
- key:'zt',
522
+ key: 'zt',
513
523
  showOverflowTooltip: true,
514
524
  width: 80,
515
525
  render: (h, params) => {
@@ -530,21 +540,26 @@ export default {
530
540
  label: '办理意见',
531
541
  field: 'doresult',
532
542
  align: 'center',
533
- key:'blyj',
543
+ key: 'blyj',
534
544
  showOverflowTooltip: true,
535
545
  render: (h, params) => {
536
- return h(
537
- 'span',
538
- {},
539
- params.row.doresult || params.row.handleInfo
540
- );
546
+ return h('span', {}, [
547
+ params.row.doresult
548
+ ? params.row.doresult + (params.row.handleInfo ? '&' : '')
549
+ : '',
550
+ h(
551
+ 'span',
552
+ { style: { color: '#A5A5A5', marginLeft: '2px' } },
553
+ params.row.handleInfo || ''
554
+ )
555
+ ]);
541
556
  }
542
557
  },
543
558
  {
544
559
  label: '验签',
545
560
  field: 'authTypeStr',
546
561
  align: 'center',
547
- key:'yq',
562
+ key: 'yq',
548
563
  showOverflowTooltip: true,
549
564
  width: 70,
550
565
  render: (h, params) => {
@@ -559,7 +574,7 @@ export default {
559
574
  label: '附件',
560
575
  field: 'hasAdjunct',
561
576
  align: 'center',
562
- key:'fj',
577
+ key: 'fj',
563
578
  showOverflowTooltip: true,
564
579
  width: 70,
565
580
  render: (h, params) => {
@@ -579,14 +594,16 @@ export default {
579
594
  label: '时间',
580
595
  field: 'doetime',
581
596
  align: 'center',
582
- key:'sj',
597
+ key: 'sj',
583
598
  showOverflowTooltip: true,
584
599
  width: 150,
585
600
  render: (h, params) => {
586
601
  return h(
587
602
  'span',
588
603
  {},
589
- params.row.doetime ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm') : ''
604
+ params.row.doetime
605
+ ? util.formatDate(params.row.doetime, 'yyyy-MM-dd HH:mm')
606
+ : ''
590
607
  );
591
608
  }
592
609
  },
@@ -594,7 +611,7 @@ export default {
594
611
  label: '代办人',
595
612
  field: 'douserid',
596
613
  align: 'center',
597
- key:'dbr',
614
+ key: 'dbr',
598
615
  showOverflowTooltip: true,
599
616
  width: 80,
600
617
  hide: _that.flowTableInfo.hasAgent != '1'
@@ -603,7 +620,7 @@ export default {
603
620
  label: '催办',
604
621
  field: 'pressTimes',
605
622
  align: 'center',
606
- key:'cb',
623
+ key: 'cb',
607
624
  showOverflowTooltip: true,
608
625
  width: 150,
609
626
  render: (h, params) => {
@@ -988,11 +1005,11 @@ export default {
988
1005
  this.isShort = isShort;
989
1006
  this.taskReadName = taskReadName;
990
1007
  this.flowData = wfHistoryList;
991
- this.flowData.map(x => {
992
- if(!x.deptid){
993
- x.deptid = x.deptName
1008
+ this.flowData.map((x) => {
1009
+ if (!x.deptid) {
1010
+ x.deptid = x.deptName;
994
1011
  }
995
- })
1012
+ });
996
1013
  this.splitReadingData = fyHistoryList;
997
1014
  this.modify = modify;
998
1015
  this.show = true;
@@ -1111,13 +1128,18 @@ export default {
1111
1128
  const {
1112
1129
  status,
1113
1130
  message,
1114
- data: { presetInfoList, presetInfoListHiddenColumns, canDelete,currentUserHasPresetInfoAuth }
1131
+ data: {
1132
+ presetInfoList,
1133
+ presetInfoListHiddenColumns,
1134
+ canDelete,
1135
+ currentUserHasPresetInfoAuth
1136
+ }
1115
1137
  } = res;
1116
1138
  this.loading.close();
1117
1139
  if (status == 'success') {
1118
1140
  presetInfoList && (this.presetData = presetInfoList);
1119
1141
  this.presetInfoListHiddenColumns = presetInfoListHiddenColumns;
1120
- this.currentUserHasPresetInfoAuth = currentUserHasPresetInfoAuth
1142
+ this.currentUserHasPresetInfoAuth = currentUserHasPresetInfoAuth;
1121
1143
  this.canDelete = canDelete;
1122
1144
  } else {
1123
1145
  this.$message.error(message || '系统错误,请联系管理员!');
@@ -12,19 +12,25 @@
12
12
  element-loading-text="登录中..."
13
13
  element-loading-spinner="el-icon-loading"
14
14
  element-loading-background="rgba(0, 0, 0, 0.65)"
15
- :class="{ 'es-simple': mode == 'simple' }"
15
+ :class="{
16
+ 'es-simple': mode == 'simple',
17
+ 'es-adaptive': !isScale
18
+ }"
16
19
  :style="transform"
17
20
  >
18
21
  <img v-if="loginNameImg" class="es-login-name" :src="loginNameImg" />
19
- <div class="es-login-main" :style="getBackground(loginMainImg)">
20
- <div v-if="loginTitleImg" class="es-login-title-image">
21
- <img class="es-login-title-img" :src="loginTitleImg" />
22
- </div>
22
+ <div
23
+ class="es-login-main"
24
+ :style="getBackground(loginMainImg)"
25
+ :class="{
26
+ 'es-switchs': switchs > 2
27
+ }"
28
+ >
23
29
  <div
24
30
  v-if="switchs > 1"
25
31
  :class="{
26
32
  'es-login-switch': switchs == 2,
27
- 'es-login-switchs': switchs > 2
33
+ 'es-login-switchs': switchs > 2 || (switchs == 2 && loginTitleImg)
28
34
  }"
29
35
  >
30
36
  <i
@@ -40,9 +46,16 @@
40
46
  ]"
41
47
  ></i>
42
48
  </div>
49
+ <div v-if="loginTitleImg" class="es-login-title-image">
50
+ <img class="es-login-title-img" :src="loginTitleImg" />
51
+ </div>
43
52
  <div class="es-login-form-box">
44
53
  <template v-if="isShow(active) && (active == 0 || active == 12)">
45
- <el-form ref="login" class="es-login-form" :model="formData">
54
+ <el-form
55
+ :ref="'login' + active"
56
+ class="es-login-form"
57
+ :model="formData"
58
+ >
46
59
  <template v-if="!loginTitleImg">
47
60
  <slot name="login-title" :type="active">
48
61
  <div class="es-login-title">
@@ -128,7 +141,7 @@
128
141
  >{{ btnText }}</el-button
129
142
  >
130
143
  <img
131
- v-show="imgCode && active == 0"
144
+ v-show="imgCode && (active == '0' || active == '12')"
132
145
  class="es-img-code"
133
146
  :src="imageCode"
134
147
  @click.stop="getImgCode"
@@ -189,12 +202,13 @@
189
202
  <es-qr-code
190
203
  :content="identifyingId"
191
204
  :logo="qrimg"
205
+ auto
192
206
  v-if="active == 3 && identifyingId"
193
207
  ></es-qr-code>
194
208
  <div class="es-wx-qrcode-box" v-if="active == 9">
195
209
  <es-wxlogin
196
210
  href="data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICB3aWR0aDogMTAwJSAhaW1wb3J0YW50OwogICAgYm94LXNpemluZzogYm9yZGVyLWJveCAhaW1wb3J0YW50OwogICAgbWFyZ2luOiAwICFpbXBvcnRhbnQ7Cn0KCi5pbXBvd2VyQm94IC5pbmZvLAouaW1wb3dlckJveCAudGl0bGUgewogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9"
197
- height="300px"
211
+ auto
198
212
  :appid="wechatAppid"
199
213
  :scope="wechatScope"
200
214
  :redirect_uri="redirectUri"
@@ -204,7 +218,7 @@
204
218
  </template>
205
219
  <template v-if="isShow(active) && (active == 6 || active == 11)">
206
220
  <el-form
207
- ref="login"
221
+ :ref="'login' + active"
208
222
  class="es-login-form es-login-verify"
209
223
  :model="formData"
210
224
  >
@@ -568,10 +582,7 @@ export default {
568
582
  type: Number,
569
583
  default: 1500
570
584
  },
571
- isScale: {
572
- type: Boolean,
573
- default: true
574
- }
585
+ isScale: Boolean
575
586
  },
576
587
  computed: {
577
588
  transform() {
@@ -961,8 +972,6 @@ export default {
961
972
  }
962
973
  },
963
974
  switchLogin(res) {
964
- //this.$refs.login && this.$refs.login.resetFields();
965
- this.$refs.login && this.$refs.login.clearValidate();
966
975
  if (res != 1) {
967
976
  this.active = res.type;
968
977
  this.title = res.name;
@@ -971,6 +980,10 @@ export default {
971
980
  }
972
981
  this.countdown = 0;
973
982
  this.$emit('change-type', res, this.identifyingId);
983
+ this.$nextTick(() => {
984
+ let ref = 'login' + this.active;
985
+ this.$refs[ref] && this.$refs[ref].clearValidate();
986
+ });
974
987
  },
975
988
  isShow(res) {
976
989
  return this.loginModel.indexOf(res) > -1;
@@ -1031,7 +1044,9 @@ export default {
1031
1044
  this.setup = res.setup;
1032
1045
  this.sysName = res.subsystemName;
1033
1046
  this.downloadSetup = res.downloadSetup;
1034
- document.title = res.subsystemName;
1047
+ if (res.subsystemName) {
1048
+ document.title = res.subsystemName;
1049
+ }
1035
1050
  this.app = res.appName || res.subsystemName;
1036
1051
  if (res.qrimg || res.qrImg) {
1037
1052
  this.qrimg = res.qrimg || res.qrImg;
@@ -1,25 +1,27 @@
1
1
  <template>
2
2
  <div class="es-qrcode-box" id="qrcode" ref="qrcode">
3
- <img
4
- class="es-qrcode-img"
5
- :width="_width"
6
- :height="_height"
7
- ref="qrcodeImg"
8
- alt="二维码图片"
9
- />
10
- <!-- <img
3
+ <template v-if="mwidth && mheight">
4
+ <img
5
+ class="es-qrcode-img"
6
+ :width="mwidth"
7
+ :height="mheight"
8
+ ref="qrcodeImg"
9
+ alt="二维码图片"
10
+ />
11
+ <!-- <img
11
12
  v-if="logo"
12
13
  class="es-qrcode-logo"
13
14
  ref="qrcodeLogo"
14
15
  :src="logo"
15
16
  alt="二维码logo"
16
17
  /> -->
17
- <canvas
18
- :width="_width"
19
- :height="_height"
20
- class="canvas"
21
- ref="canvas"
22
- ></canvas>
18
+ <canvas
19
+ :width="mwidth"
20
+ :height="mheight"
21
+ class="canvas"
22
+ ref="canvas"
23
+ ></canvas>
24
+ </template>
23
25
  </div>
24
26
  </template>
25
27
 
@@ -35,8 +37,14 @@ export default {
35
37
  },
36
38
  logo: String,
37
39
  text: String,
38
- width: Number,
39
- height: Number,
40
+ width: {
41
+ type: Number,
42
+ default: 300
43
+ },
44
+ height: {
45
+ type: Number,
46
+ default: 300
47
+ },
40
48
  auto: Boolean,
41
49
  option: {
42
50
  type: Object,
@@ -51,22 +59,12 @@ export default {
51
59
  }
52
60
  }
53
61
  },
54
- computed: {
55
- _width() {
56
- if (this.auto) {
57
- return this.$refs.qrcode.offsetWidth;
58
- }
59
- return this.width ? this.width : 300;
60
- },
61
- _height() {
62
- if (this.auto) {
63
- return this.$refs.qrcode.offsetHeight;
64
- }
65
- return this.height ? this.height : 300;
66
- }
67
- },
62
+ computed: {},
68
63
  data() {
69
- return {};
64
+ return {
65
+ mwidth: 0,
66
+ mheight: 0
67
+ };
70
68
  },
71
69
  watch: {
72
70
  logo: function (val) {
@@ -85,6 +83,19 @@ export default {
85
83
  },
86
84
  created() {},
87
85
  mounted() {
86
+ if (this.auto) {
87
+ let h =
88
+ this.$refs.qrcode.offsetHeight -
89
+ parseInt(util.getStyle(this.$refs.qrcode, 'padding-top'), 10) -
90
+ parseInt(util.getStyle(this.$refs.qrcode, 'padding-bottom'), 10);
91
+ if (h > 0) {
92
+ this.mwidth = h;
93
+ this.mheight = h;
94
+ }
95
+ } else {
96
+ this.mwidth = this.width;
97
+ this.mheight = this.height;
98
+ }
88
99
  this.$nextTick(() => {
89
100
  this.createQRCode();
90
101
  });
@@ -95,8 +106,8 @@ export default {
95
106
  //let qrcodeLogo = this.$refs.qrcodeLogo;
96
107
  let canvas = this.$refs.canvas;
97
108
  let option = util.extend({}, this.option, {
98
- width: this._width,
99
- height: this._height
109
+ width: this.mwidth,
110
+ height: this.mheight
100
111
  });
101
112
  if (!qrcodeImg) {
102
113
  return false;
@@ -108,12 +119,12 @@ export default {
108
119
  let ctx = canvas.getContext('2d');
109
120
  setTimeout(() => {
110
121
  //获取图片
111
- ctx.drawImage(qrcodeImg, 0, 0, this._width, this._height);
122
+ ctx.drawImage(qrcodeImg, 0, 0, this.mwidth, this.mheight);
112
123
  if (this.logo && this.logo.indexOf('.') > -1) {
113
124
  let logo = new Image();
114
125
  logo.src = this.logo;
115
126
  //设置logo大小
116
- let logoPosition = (this._width - 46) / 2; //logo相对于canvas居中定位
127
+ let logoPosition = (this.mwidth - 46) / 2; //logo相对于canvas居中定位
117
128
  //设置获取的logo将其变为圆角以及添加白色背景
118
129
  /* ctx.fillStyle = "#fff";
119
130
  ctx.beginPath();
@@ -138,8 +149,8 @@ export default {
138
149
  let fpadd = 10; //规定内间距
139
150
  ctx.font = 'bold 16px Arial';
140
151
  let tw = ctx.measureText(this.text).width; //文字真实宽度
141
- let ftop = (this._height - 16) / 2; //根据字体大小计算文字top
142
- let fleft = (this._width - tw) / 2; //根据字体大小计算文字left
152
+ let ftop = (this.mheight - 16) / 2; //根据字体大小计算文字top
153
+ let fleft = (this.mwidth - tw) / 2; //根据字体大小计算文字left
143
154
  let tp = 16 / 2; //字体边距为字体大小的一半可以自己设置
144
155
  ctx.fillStyle = '#fff';
145
156
  ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, 16 + tp);