qrcode.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <el-dialog
  3. title="二维码"
  4. v-if="dialog.qrcode"
  5. custom-class="custom-dialog"
  6. :visible.sync="dialog.qrcode"
  7. width="500px"
  8. >
  9. <div>
  10. <div id="qrcode">
  11. <img
  12. style="width:200px;height:200px;margin:auto;display:block;"
  13. :src="'/image-service/common/file_get/'+ qrcodeUrl +'?systemId=dataPlatform'"
  14. alt="二维码"
  15. >
  16. </div>
  17. </div>
  18. </el-dialog>
  19. </template>
  20. <script>
  21. // import { qrcanvas } from "qrcanvas";
  22. export default {
  23. props: {
  24. dialog: {
  25. type: Object,
  26. default: function () {
  27. return {
  28. qrcode: false
  29. };
  30. }
  31. },
  32. qrcodeUrl: {
  33. default: ""
  34. }
  35. },
  36. data() {
  37. return {};
  38. },
  39. created() { },
  40. mounted() {
  41. },
  42. methods: {
  43. // getCanvas(id) {
  44. // let canvas = qrcanvas({
  45. // cellSize: 8,
  46. // data: 'http://service.sagacloud.cn/qrcode/' + 'Pea3a31168a30d4056acda3a56e557940b'
  47. // });
  48. // canvas.style.margin = "auto"
  49. // canvas.style.display = "block"
  50. // this.$nextTick(() => {
  51. // document.getElementById("qrcode").innerHTML = null;
  52. // document.getElementById("qrcode").appendChild(canvas);
  53. // });
  54. // }
  55. }
  56. };
  57. </script>
  58. <style lang="less" scoped>
  59. #qrcode {
  60. height: 300px;
  61. overflow: auto;
  62. }
  63. </style>