vue使用qrcode

最新推荐文章于 2024-08-09 13:40:51 发布

小星星o

最新推荐文章于 2024-08-09 13:40:51 发布

阅读量244

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74608954/article/details/132510734

版权

npm install qrcode

import QRCode from 'qrcode'

/**查看二维码*/
    QRcodeUI(row) {
      this.QRopenData.theme = row.subject//主题
      this.QRopenData.URL = 'http://192.168.2.22:9090/#/?id=' + row.id //链接
      this.invokeQRopenData()
      this.QRopen = true
    },
    ```
    ```
    //调用二维码
    invokeQRopenData() {
      const data = this.QRopenData.URL; // QR Code的数据
      QRCode.toDataURL(data)
        .then(url => {
          this.qrcodeDataUrl = url; // 将QR Code数据URL赋值给变量
        })
        .catch(error => {
          console.error('生成QR Code出错：', error);
        });
    },
    ```
    ```
    //二维码下载
    downloadQRCode() {
      const link = document.createElement('a');
      link.href = this.qrcodeDataUrl; // 二维码图片的数据URL
      link.download = this.QRopenData.theme; // 下载的文件名，可以根据需要修改
      link.click();
    },
    ```
    ```
    <el-dialog title="二维码下载" :visible.sync="QRopen" width="500px" append-to-body>
      <div class="xiazaizhuti">{{ QRopenData.theme }}</div>
      <img class="erweima" v-bind:src="qrcodeDataUrl" alt="QR Code">
      <el-button class="xiazaierweima" type="success" @click="downloadQRCode">下载二维码</el-button>
      <div class="gekai">
        <el-input ref="textInput" type="text" :value="QRopenData.URL"
                  @click="selectText"/>
        <el-button size="mini" type="warning" @click="copyText">选中复制链接</el-button>
      </div>
    </el-dialog>
    
    ```