qrcodeeds.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div id="qrcode" ref="qrcode"></div>
  3. </template>
  4. <script>
  5. import QRCode from 'qrcodejs2' // 引入qrcode
  6. export default {
  7. name: "qrcode",
  8. props: {
  9. field: Object,
  10. formData: {
  11. type: Object,
  12. default () {
  13. return {}
  14. }
  15. },
  16. readonly: {
  17. type: Boolean,
  18. default: false,
  19. }
  20. },
  21. data() {
  22. return {
  23. flag: false, //标记二维码是否已经生成
  24. }
  25. },
  26. watch: {
  27. formData(val) {
  28. if (val.zongWaiJian != '') {
  29. if (!this.flag) {
  30. this.qrcode(val.zongWaiJian)
  31. this.flag = true;
  32. }
  33. }
  34. }
  35. },
  36. methods: {
  37. qrcode(zongWaiJian) {
  38. console.log('执行生成二维码');
  39. let qrcode = new QRCode('qrcode', {
  40. width: 132,
  41. height: 132,
  42. colorDark: "#000000", //前景色
  43. colorLight: "#FFFFFF", //背景色
  44. correctLevel: QRCode.CorrectLevel.L,
  45. })
  46. },
  47. },
  48. }
  49. </script>
  50. <style scoped>
  51. #qrcode {
  52. width: 100px;
  53. height: 100px;
  54. }
  55. </style>