Vue输入内容/链接生成二维码

方式一：qrcode（无 icon 图标）

npm i qrcodejs2 --save
   
   

完整代码

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div 
       
       class
       
       =
       
       "flex-box"
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <div
       
       >qrcode（无 icon 图标）
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <div 
       
       class
       
       =
       
       "qr-code" 
       
       ref
       
       =
       
       "qrCodeUrl"
       
       >
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import QRCode 
       
       from 
       
       'qrcodejs2';
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         dat
       
       a() {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       return {};
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       /
       
       * 创建二维码 
       
       *
       
       /
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           creatQrCode() {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             new QRCode(this.$refs.qrCodeUrl, {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               text: 
       
       'https://blog.csdn.net/AdminGuan', 
       
       /
       
       / 二维码的内容
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               width: 
       
       150,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               height: 
       
       150,
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               colorDark: 
       
       '#000',
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               colorLight: 
       
       '#fff',
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               correctLevel: QRCode.CorrectLevel.H
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             });
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         mounted() {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           this.creatQrCode(); 
       
       /
       
       / 创建二维码
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <style scoped
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .flex-box {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       display: flex;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         align-items: center;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         justify-content: center;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         flex-direction: 
       
       column;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .qr-code {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         padding: 
       
       10px;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         margin-top: 
       
       20px;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         background-color: #fff;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         border: 
       
       1px solid red;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /style
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

方式二：vue-qr（有 icon 图标）

官网地址：vue-qr - npm

npm install vue-qr --save
   
   

import 引入方式

import vueQr from 'vue-qr'; // vue2.0
   
   

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
   
   

完整代码

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div 
       
       class
       
       =
       
       "flex-box"
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <div
       
       >vue-qr（有 icon 图标）
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <vue-qr 
       
       class
       
       =
       
       "qr-code" :logoSrc
       
       =
       
       "imageUrl" :text
       
       =
       
       "qrCodeUrl" :
       
       size
       
       =
       
       "150" 
       
       /
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <
       
       /div
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /template
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import vueQr 
       
       from 
       
       'vue-qr'; 
       
       /
       
       / vue
       
       2.0
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       /
       
       / import vueQr 
       
       from 
       
       'vue-qr/src/packages/vue-qr.vue'; 
       
       /
       
       / vue
       
       3.0 (support vite)
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         components: { vueQr },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         dat
       
       a() {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             qrCodeUrl: 
       
       'https://blog.csdn.net/AdminGuan', 
       
       /
       
       / 二维码的内容
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             imageUrl: require(
       
       '../assets/default.jpg') 
       
       /
       
       / icon路径
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         methods: {}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /script
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <style scoped
       
       >
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .flex-box {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       display: flex;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         align-items: center;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         justify-content: center;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         flex-direction: 
       
       column;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .qr-code {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         margin-top: 
       
       20px;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         background-color: #fff;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         border: 
       
       1px solid red;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <
       
       /style
       
       >
      
      
     
     
   
   

    
    
   
   
   
   

相关配置属性

属性名	含义
text	编码内容
correctLevel	容错级别（0 - 3）
size	尺寸，长宽一致, 包含外边距
margin	二维码图像的外边距，默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址，设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色，在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 logo 地址
logoScale	用于计算 logo 大小的值，过大将导致解码失败，logo 尺寸计算公式 logoScale * (size - 2 * margin)，默认 0.2
logoMargin	logo 标识周围的空白边框，默认为 0
logoBackgroundColor	logo 背景色，需要设置 logo margin
logoCornerRadius	logo 标识及其边框的圆角半径，默认为 0
whiteMargin	若设为 true，背景图外将绘制白色边框
dotScale	数据区域点缩小比例，默认为 0.35
autoColor	若为 true，图像将被二值化处理，未指定阈值则使用默认值
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值
callback	生成的二维码 data url 可以在回调中取得，第一个参数为二维码 data url，第二个参数为 props 传过来的 qid(因为二维码生成是异步的，所以加个 id 用于排序)
bindElement	指定是否需要自动将生成的二维码绑定到 HTML 上，默认是 true