vue项目生成二维码功能使用QRCode

最新推荐文章于 2025-06-10 09:27:08 发布

安静的小女子

最新推荐文章于 2025-06-10 09:27:08 发布

阅读量2.5w

点赞数 3

分类专栏： Vue 二维码生成微信端

Vue 同时被 3 个专栏收录

7 篇文章

订阅专栏

二维码生成

1 篇文章

订阅专栏

微信端

1 篇文章

订阅专栏

本文介绍了一个使用 qrcodejs2 插件生成二维码的示例。通过 npm 安装插件并将其引入到页面中，可以创建指定大小和内容的二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，导入第三方插件

npm install –save qrcode

2，在页面上引入

import QRCode from 'qrcodejs2'

<div id="qrcode">二维码位置</div>

methods: {  
    qrcode () {  
      let qrcode = new QRCode('qrcode', {  
        width: 100,  
        height: 100, // 高度  
        text: '56663159' // 二维码内容  
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
        // background: '#f0f'  
        // foreground: '#ff0'  
      })  
      console.log(qrcode)  
    }  
  },

methods: {  
    qrcode () {  
      let qrcode = new QRCode('qrcode', {  
        width: 100,  
        height: 100, // 高度  
        text: '56663159' // 二维码内容  
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
        // background: '#f0f'  
        // foreground: '#ff0'  
      })  
      console.log(qrcode)  
    }  
  },