Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码

1.下载

npm install qrcode --save-dev

2.引入(在所需要的页面中引入)

import QRCode from “qrcode”; //引入生成二维码插件

3.生成二维码

<canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas>

<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {props: [""],data() {return {qrUrl: "",};},watch: {},mounted() {this.getQRCode();},created() {},methods: {getQRCode() {

    //生成的二维码为URL地址js

    this.qrUrl= "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53";

      let opts = {errorCorrectionLevel: "H", //容错级别type: "image/png", //生成的二维码类型quality: 0.3, //二维码质量margin: 0, //二维码留白边距width: 280, //宽height: 280, //高text: "http://www.xxx.com", //二维码内容color: {dark: "#333333", //前景色light: "#fff", //背景色},};let msg = document.getElementById("QRCode_header");// 将获取到的数据(val)画到msg(canvas)上QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {if (error) {console.log("二维码加载失败", error);this.$message.error("二维码加载失败");}});},},
};
</script>

作者：微微一笑绝绝子

出处：Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码 - 微微一笑绝绝子 - 博客园

本博客文章均为作者原创，转载请注明作者和原文链接。

Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码相关推荐

vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
vue中文件上传方法
vue中文件上传方法(图片,表格) //html部分 <input type="file" id="people-export" ref="in ...
vue中使用vue-awesome-swiper的方法（实现一屏展示多个图片，点击左右滚动一张）
vue中使用vue-awesome-swiper的方法 (awesome-swiper demo官网)[https://surmon-china.github.io/vue-awesome-swipe ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
Vue中的this.$nextTick方法的使用 [前端][Vue框架]
Vue中的this.$nextTick方法的使用因为在vue中当组件的data中的数据发生了变化之后, 如果这个data中的数据与某个Dom元素有关, 那么这个时候这个Dom元素不会立即更新, vu ...
解决vue中无法取得methods方法中的return值
解决vue中无法取得methods方法中的return值参考文章: (1)解决vue中无法取得methods方法中的return值 (2)https://www.cnblogs.com/betty- ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
uniapp中根据URL链接生成二维码（适用所有Javascript运行环境的前端应用）,保存二维码到本地相册。
推荐一款适用所有Javascript运行环境的二维码生成组件. uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用 ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
理解Vue中的methods对象方法里的this指向，并解读源码
Vue3的版本 "version": "3.2.20" 阅读区域 618 - 645 解决疑惑 1. methods 对象的 this指向 2. methods ...

Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码

Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码相关推荐

最新文章

热门文章