标签：vue 二维码 element qrcodejs2 qrcode 地址 QRCode 生成 256

 

 

参考：

1.解决vue项目使用element的Dialog组件生成二维码的系列问题

2.element-ui生成二维码

 3.Element UI：<el-button> 复制功能  

 

技术点：

1.生成二维码：使用QRCode

2.地址复制按钮， <el-button>

 

实现代码：

　　1.复制

    <el-button
      type="primary"
      v-clipboard:copy="loginUrl"
      v-clipboard:success="onCopySuccess"
      v-clipboard:error="onCopyError"
    >复制</el-button>
  </div>

      loginUrl: 'http://www.baidu.com',

    onCopySuccess() {
      this.$message.success("复制成功");
    },
    onCopyError() {
      this.$message.error("复制失败");
    },

 

效果：

 

 

 

 

　　2.二维码

1，终端输入 npm install  qrcodejs2  --save 安装qrcodejs2

npm install  qrcodejs2  --save

import QRCode from 'qrcodejs2'

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

  //  生成二维码
    GetQRcode(){
      var qrcode = new QRCode('qrcode', {
        text: this.loginUrl,    //  需要生成二维码的内容
        width: 256,
        height: 256,
        colorDark : '#000000',
        colorLight : '#ffffff',
        correctLevel : QRCode.CorrectLevel.H
      });
    },

效果：

 

 

 

   

//  生成二维码
GetQRcode(){
var qrcode = new QRCode('qrcode', {
text: this.loginUrl,    //  需要生成二维码的内容
width: 256,
height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
},

标签：vue,二维码,element,qrcodejs2,qrcode,地址,QRCode,生成,256
来源： https://www.cnblogs.com/nextgg/p/16501044.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。