前端生成二维码

最新推荐文章于 2024-08-29 19:36:49 发布

小白白一枚111

最新推荐文章于 2024-08-29 19:36:49 发布

阅读量203

点赞数 3

分类专栏： vue js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_50166856/article/details/141328748

版权

js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

如图：
在这里插入图片描述

一.首先先安装插件qrcode

npm install --save qrcode

二.引入插件

<script>
import QRCode from 'qrcode';
 data() {
    return {
      QRImgUrl: '',
    };
  },
methods: {
    // 链接转换为二维码
    getQRcode(linkUrl) {
      this.QRImgUrl = '';
      const opts = {
        errorCorrectionLevel: 'L', // 容错级别
        type: 'image/png', // 生成的二维码类型
        quality: 0.3, // 二维码质量
        margin: 0, // 二维码留白边距
        width: 256, // 宽
        height: 256, // 高
        text: '', // 二维码内容
        color: {
          dark: '#000000', // 前景色
          light: '#fff', // 背景色
        },
      };
      QRCode.toDataURL(linkUrl, opts, (err, url) => {
        if (err) throw err;
        // 将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url;
      });
    },
}
</script>