vue2.使用qrcodejs2生成二维码在el-table-column展示

最新推荐文章于 2024-05-03 11:47:20 发布

陳那个陈

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量1.2k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_52164116/article/details/125328078

版权

安装qrcodejs2：

npm install qrcodejs2 --save

这里直接放上封装好的子组件了，qrcodeimg.js：

<template>
    <div>
        <img v-if="imgData != ''" :src="imgData" />
        <div :id="qrid" class="qrcode" v-show="imgData == ''"></div>
    </div>
</template>
<script>
import QRCode from "qrcodejs2"; // 引入qrcode
export default {
    name: "QrCodeImg",
    props: ["qrid", "qrContent", "qrWidth", "qrHeight"],
    data() {
        return {
            imgData: ""
        };
    },
    watch: {
        //监听二维码内容值的变化，重新生成二维码
        qrContent: function(val) {
            console.log(val);
            this.qrcode();
        }
    },
    created() {},
    mounted() {
        setTimeout(() => {
            this.qrcode();
        }, 300);
    },
    methods: {
        qrcode() {
            this.$nextTick(() => {
                document.getElementById(this.qrid).innerHTML = ""; //否则每生成一次，上次的还存在，都会多一个二维码
                //要先生成div再生成二维码，否则Cannot read properties of undefined (reading 'appendChild')
                new QRCode(this.qrid, {
                    text: this.qrContent,
                    //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
                    width: this.qrWidth, //生成二维码的宽度
                    height: this.qrHeight, //生成二维码的高度
                    colorDark: "#333333", // 二维码颜色
                    colorLight: "#F8F8FF" //二维码背景颜色
                });
            });
            var canvasobj = document.getElementsByTagName("canvas")[0];
            // 将转换后的img标签插入到html中
            var img = this.CanvasToImage(canvasobj);
            this.imgData = img.src;
        },
        CanvasToImage(canvas) {
            //从canvas中提取图片image，新建image对象
            var image = new Image();
            // canvas.toDataURL 返回Base64编码的URL
            // image.src = canvas.toDataURL("image/jpg");
            return image;
        }
    }
};
</script>
<style lang="stylus" scoped>

div img {
    cursor: pointer;
    transition: all 0.6s;
}

div img:hover {
    transform: scale(1.2);
}
</style>

父组件调用qrcodeimg.js如下：

<template>
  <div class="container" id="app">
    <div id="qrcodeArea">
    //生成单个二维码时可以固定id值
      <QrCodeImg
         :qrid="'currentQr'"
         :qrContent="qrContent"
         :qrHeight="qrHeight"
         :qrWidth="qrWidth"
      />
    </div>
    //批量生成二维码时需要动态传入id！！
    <el-table border :data="tableList" class="tableBox">
    	  <el-table-column prop="orderNo" label="二维码" width="120">
                <template slot-scope="scope">
                    <div id="qrcodeArea">
                        <QrCodeImg
                            :qrid="scope.row.id"
                            :qrContent="scope.row.orderNo"
                            :qrHeight="qrHeight"
                            :qrWidth="qrWidth"
                        />
                    </div>
                </template>
            </el-table-column>
     </el-table>
   </div>
</template>

<script>
import QrCodeImg from "../../components/QrCodeImg/QrCodeImg.vue"
export default {
  components: {
    QrCodeImg,
  },
  data() {
    return {
      qrWidth: 70,
      qrHeight: 70,
      qrContent: "https://www.baidu.com/",
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
  created() {},
}
</script>

后端让我取订单号的值，来生产二维码，效果图：