web-mobile/src/components/qrcode.vue

<template>
  <div id="qrcode">
    <el-row>
      <el-col :span="24" style="text-align:center">
        <canvas id="canvas"></canvas>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QRCode from 'qrcode';
export default {
  name: 'qrcode',
  props: {
    xm: { type: null },
    code: { type: null },
    type: { type: null },
  },
  components: {},
  data: () => ({}),
  created() {
    this.$nextTick(() => {
      this.initQrcode();
    });
  },
  computed: {
    newHeight: {
      get() {
        let height;
        if (this.utype === 'user') {
          height = window.screen.availHeight * 0.3 + 'px';
        } else {
          height = window.screen.availHeight * 0.6 + 'px';
        }
        let style = { height: height };
        return style;
      },
    },
  },
  methods: {
    async initQrcode() {
      await QRCode.toCanvas(document.getElementById('canvas'), this.code, {
        width: 300,
        margin: 0,
        color: { dark: '#ff4400' }, //{ dark: this.$route.query.type === '0' ? '#00ff14' : '#FF9900' }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>