index.js 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
  3. import { defineComponent, computed, ref } from 'vue';
  4. import useConfigInject from '../config-provider/hooks/useConfigInject';
  5. import useStyle from './style';
  6. import { useLocaleReceiver } from '../locale/LocaleReceiver';
  7. import { withInstall } from '../_util/type';
  8. import Spin from '../spin';
  9. import Button from '../button';
  10. import { ReloadOutlined } from '@ant-design/icons-vue';
  11. import { useToken } from '../theme/internal';
  12. import { QRCodeCanvas, QRCodeSVG } from './QRCode';
  13. import warning from '../_util/warning';
  14. import { qrcodeProps } from './interface';
  15. const QRCode = defineComponent({
  16. name: 'AQrcode',
  17. inheritAttrs: false,
  18. props: qrcodeProps(),
  19. emits: ['refresh'],
  20. setup(props, _ref) {
  21. let {
  22. emit,
  23. attrs,
  24. expose
  25. } = _ref;
  26. if (process.env.NODE_ENV !== 'production') {
  27. warning(!(props.icon && props.errorLevel === 'L'), 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
  28. }
  29. const [locale] = useLocaleReceiver('QRCode');
  30. const {
  31. prefixCls
  32. } = useConfigInject('qrcode', props);
  33. const [wrapSSR, hashId] = useStyle(prefixCls);
  34. const [, token] = useToken();
  35. const qrCodeCanvas = ref();
  36. expose({
  37. toDataURL: (type, quality) => {
  38. var _a;
  39. return (_a = qrCodeCanvas.value) === null || _a === void 0 ? void 0 : _a.toDataURL(type, quality);
  40. }
  41. });
  42. const qrCodeProps = computed(() => {
  43. const {
  44. value,
  45. icon = '',
  46. size = 160,
  47. iconSize = 40,
  48. color = token.value.colorText,
  49. bgColor = 'transparent',
  50. errorLevel = 'M'
  51. } = props;
  52. const imageSettings = {
  53. src: icon,
  54. x: undefined,
  55. y: undefined,
  56. height: iconSize,
  57. width: iconSize,
  58. excavate: true
  59. };
  60. return {
  61. value,
  62. size: size - (token.value.paddingSM + token.value.lineWidth) * 2,
  63. level: errorLevel,
  64. bgColor,
  65. fgColor: color,
  66. imageSettings: icon ? imageSettings : undefined
  67. };
  68. });
  69. return () => {
  70. const pre = prefixCls.value;
  71. return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  72. "style": [attrs.style, {
  73. width: `${props.size}px`,
  74. height: `${props.size}px`,
  75. backgroundColor: qrCodeProps.value.bgColor
  76. }],
  77. "class": [hashId.value, pre, {
  78. [`${pre}-borderless`]: !props.bordered
  79. }]
  80. }), [props.status !== 'active' && _createVNode("div", {
  81. "class": `${pre}-mask`
  82. }, [props.status === 'loading' && _createVNode(Spin, null, null), props.status === 'expired' && _createVNode(_Fragment, null, [_createVNode("p", {
  83. "class": `${pre}-expired`
  84. }, [locale.value.expired]), _createVNode(Button, {
  85. "type": "link",
  86. "onClick": e => emit('refresh', e)
  87. }, {
  88. default: () => [locale.value.refresh],
  89. icon: () => _createVNode(ReloadOutlined, null, null)
  90. })]), props.status === 'scanned' && _createVNode("p", {
  91. "class": `${pre}-scanned`
  92. }, [locale.value.scanned])]), props.type === 'canvas' ? _createVNode(QRCodeCanvas, _objectSpread({
  93. "ref": qrCodeCanvas
  94. }, qrCodeProps.value), null) : _createVNode(QRCodeSVG, qrCodeProps.value, null)]));
  95. };
  96. }
  97. });
  98. export default withInstall(QRCode);