vue 让链接转化为二维码(两种方法)

最新推荐文章于 2024-08-10 06:00:00 发布

weixin_30745641

最新推荐文章于 2024-08-10 06:00:00 发布

阅读量2.1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/miaSlady/p/9071735.html

版权

法一：

1.全局引入jQuery/qrcode

npm install jquery

npm install qrcode-npm

2.页面引入jQuery/qrcode

import $ from "jquery";

var QRCode = require('qrcode')

4.页面代码

<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

3.挂载时写入

mounted(){

QRCode.toDataURL('https://www.baidu.com')
  .then(url => {
   var qrbox = document.querySelector("#qrcode");
   const img = new Image();
   img.src=url;
   qrbox.appendChild(img);
  })
  .catch(err => {
    console.error(err)
  })

法二：

步骤：
1、安装qrcodejs2插件，在控制台输入：

npm install qrcodejs2 --save
*注意：这里安装的是qrcodejs2，不是qrcode，否则会报错

2、页面引入——在入口文件（默认是main.js）里引入：

import QRCode from 'qrcodejs2'
3、页面展示
①：在对应的Html页面中，添加html标签

<div id="qrcode" ref="qrcode"></div>
②：配置，在methods方法里配置：

qrcode () {
let qrcode = new QRCode('qrcode',{
width: 200, // 设置宽度，单位像素
height: 200, // 设置高度，单位像素
text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
})
}
③：调用

this.$nextTick(() => {
this.qrcode()
})

转载于:https://www.cnblogs.com/miaSlady/p/9071735.html