[JavaScript知识库]Vue 之 使用qrcodejs2生成二维码

1.安装qrcodejs2

npm install?qrcodejs2

2.在页面处使用

HTML ： 作为二维码的载体

<div id="qrcode" class="qrcode"></div>

JS?

// 引用
import QRCode from 'qrcodejs2';

export default {
    data(){
        return{
            linkUrl:'',// 用来画图的链接地址
        }
    },
    mounted() {
        this.getLinkUrl();
    },
    methods:{
        // 获取链接地址
        async getLinkUrl(){
            // balabalabala~~ 发起请求
            const data = await getLinkUrl()
            this.linkUrl = data.url || ''
            if(!this.linkUrl.length) return

            // 注，这里最好使用nextTick,否则可能会报错
            this.$nextTick(()=>{
                this.createQrcode()
            })
        },
        // 绘画二维码
        createQrcode(){
            // 若存在，先删除二维码
            const dom = document.getElementById('qrcode');
            if (dom) dom.innerHTML = '';
            // 这里会自动去取模版中的id为qrcode的 
            const qrcode = new QRCode('qrcode', {
                width: 150,           // 宽
                height: 150,          // 高
                text: this.linkUrl,   // 链接地址
                // 设置渲染方式 table和canvas，默认是canvas
                // render: 'canvas',   
            });
            return qrcode;
        },
        // 下载二维码
        downCode() {
          const codeDom = document.getElementById('qrcode')
          const codeImg = codeDom.getElementsByTagName('img')[0]
          const a = document.createElement('a');
          a.download = '二维码' || 'img';
          a.href = codeImg.src;
          a.click();
        }
    }
}