将链接生成二维码(js,vue)

插件 qrcode.js   下载地址     https://github.com/jeromeetienne/jquery-qrcode 
<script src="js/jquery.min.js"></script>
    <script src="js/qrcode.js"></script>
    <script src="js/jquery.qrcode.js"></script>



<div class="code"></div>




<script>
     //把链接转换为二维码
    jQuery('.code').qrcode({
        width:300, 
        height:300, 
        render:'canvas', //设置渲染方式 table canvas 
        typeNumber : 4, //计算模式 
        correctLevel : 0,//容错级别 
        background : '#ffffff',//背景颜色 
        foreground : '#000000',//前景颜色 
        text: 'https://www.baidu.com' //链接
    });
</script>

  

    <!-- vue把链接转成二维码 -->

    1.安装qrcodejs2插件,   npm install qrcodejs2 --save
    2.在当前项目页引入:     import QRCode from 'qrcodejs2'
    3. 在HTML加入:          <div id="qrcode" ref="qrcode"></div>
    4.方法
    qrcode () {
        let qrcode = new QRCode('qrcode',{
        width: 200, // 设置宽度,单位像素
        height: 200, // 设置高度,单位像素
        text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
       })
    }
    5.调用:this.qrcode()

  

posted @ 2021-04-14 11:04  野鹤亦闲云  阅读(538)  评论(0编辑  收藏  举报