在Vue中使用QRCode生成二维码 插件

方法

一、qrcode插件

1、安装依赖

npm install --save qrcode

2、引入

mian.js 复制代码
//Vue使用QRCode插件,生成二维码 
import QRCode from 'qrcode' 
Vue.prototype.$QRCode = QRCode

3、封装

vue 复制代码
<template>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
export default {
  name: "rechargeBox",
  data() {
    return {
    
    };
  },
  methods: {
    //生产二维码
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
     // this.$QRCode.toCanvas(canvas, url, function (error) {
     //   if (error) console.error(error)
     // })
      this.$QRCode.toCanvas(canvas, url, { width: 158 }); //直接修改二维码尺寸
    },
  },
  mounted() {
    let url = "https://www.baidu.com/";
    this.useqrcode(url);
  },
};
</script>
<style lang="scss" scoped>

</style>

4、页面调用

vue 复制代码
</template>
 </div>
	<div class="QR">
      <QRcode></QRcode>
       <!--二维码-->
     </div>
 </div>
</template>


<script>
import QRcode from "./QRcode.vue";//修改成自己的路径
export default {
  components: {
    QRcode,
   },
 } 
</script>

二、qrcodejs2库

1、安装依赖

npm i qrcodejs2 -S

2、页面引入

js 复制代码
import QRCode from 'qrcodejs2'

3、封装

vue 复制代码
<template>
<!--二维码位置-->
  <div id="qrcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: "rechargeBox",
  data() {
    return {
     
    };
  },
 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)
    }
  },
  
mounted () {
    this.qrcode()

  },
};
</script>
<style lang="scss" scoped>

</style>

4、使用

vue 复制代码
</template>
 </div>
	<div class="QR">
      <QRcode></QRcode>
       <!--二维码-->
     </div>
 </div>
</template>


<script>
import QRcode from "./QRcode.vue";//修改成自己的路径
export default {
  components: {
    QRcode,
   },
 } 
</script>
相关推荐
sorryhc6 分钟前
【AI解读源码系列】ant design mobile——Divider分割线
前端·javascript·react.js
前端进阶者13 分钟前
electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
前端·electron
anyup13 分钟前
🔥 uView Pro 全新升级来啦!一行配置,解锁 uView Pro 全局 TS 类型提示与校验
前端·vue.js·uni-app
Jimmy16 分钟前
使用 Electron 在 5 分钟内创建一个桌面的 React 应用
前端·javascript·electron
玲小珑19 分钟前
LangChain.js 完全开发手册(二)Prompt Engineering 与模板系统深度实践
前端·langchain·ai编程
QBorfy25 分钟前
5分钟AI,每天搞懂一个知识点(1) - 监督学习
前端·人工智能
白龙马云行技术团队30 分钟前
性能治理之页面LongTask优化
前端
Ankkaya31 分钟前
开发小结(08.11-08.16)
前端·uni-app
Hilaku31 分钟前
前端监控实战:从性能指标到用户行为,我是如何搭建监控体系的
前端·javascript·性能优化
咖啡の猫32 分钟前
Shell脚本-影响shell程序的内置命令
前端·chrome·bash