qrcode & vue

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

qrcode & vue


$ yarn add qrcode.vue # OR$ npm i -S qrcode.vue

https://www.npmjs.com/package/qrcode.vue

single-file components

demo-qrcode.vue


<template>
<div>
<qrcode-vue :value="url" :size="size" level="H"></qrcode-vue>
</div>
</template>
<script>import QrcodeVue from "qrcode.vue"';
export default {
data() {
return {
url: "https://github.xgqfrms.xyz",
size: 100,
}
},
components: {
QrcodeVue,
},
}
</script>

bug

http://47.97.241.6:8080/eapp/iframeTest/index.html#https://m.weibo.cn

https://github.com/scopewu/qrcode.vue/issues/10

https://github.com/scopewu/qrcode.vue/blob/master/src/index.js

solutions

level = L

https://github.com/scopewu/qrcode.vue#component-props

https://github.com/scopewu/qrcode.vue/issues/10#issuecomment-487810869

I think this a little bug of my code , because using the wrong the symbol's capacity.

node-qrcode

https://www.npmjs.com/package/qrcode

https://github.com/soldair/node-qrcode


setTimeout(() => {
// const QRCode = require("qrcode");
let canvas = document.getElementById("qrcode_canvas");
// canvas.width = 100;
// canvas.height = 100;
// canvas.style.width = "100px";
// canvas.style.height = "100px";
let url = this.url;
QRCode.toCanvas(
canvas,
url,
{
width: 120,
errorCorrectionLevel: "H",
},
function (error) {
if (error) {
console.error(error);
} else {
console.log("success!");
}
}
);
}, 0);

qrcode.js

https://davidshimjs.github.io/qrcodejs/

https://github.com/davidshimjs/qrcodejs

qrcode & vue的更多相关文章

1. VUE使用QRcode或者vue-qr生成二维码

   这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...

2. URL & QRcode auto generator

   URL & QRcode auto generator 二维码 npm & qrcode https://www.npmjs.com/package/qrcode https://ww ...

3. vue环境中生成二维码

   <template><div><div id='code'></div><canvas id="canvas">< ...

4. vue2.0 自定义 生成二维码（QRCode）组件

   1.自定义 生成二维码组件 QRCode.vue <!-- 生成二维码 组件 --> <template> <canvas class="qrcode-canv ...

5. vue 二维码长按保存和复制内容

   效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...

6. 移动端h5页面的那些坑

   最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...

7. Vue使用QRCode.js生成二维码

   1.安装qrcode npm install qrcode 2.组件中引入qrcode import QRCode from 'qrcode' 3.html代码 <div><span ...

8. vue中使用qrcode，遇到两次渲染的问题

   1.安装 qrcodejs2: npm install qrcodejs2 --save 2.页面中引入: import QRCode from "qrcodejs2";   co ...

9. Vue前端利用qrcode生成二维码

   <div id="qrcode" style="width: 560px;height: 560px;background-color: white;"& ...

随机推荐

1. mysql报错：java.sql.SQLException: Incorrect string value: '\xE4\xB8\x80\xE6\xAC\xA1...' for column 'excelName' at row 1

   一.问题 用Eclipse做项目时候报错 java.sql.SQLException: Incorrect string value: '\xE4\xB8\x80\xE6\xAC\xA1...' fo ...

2. 学习前端笔记1（HTML）

   (注:此文是在看过许多学习资料和视频之后,加上自身理解拼凑而成,仅作学习之用.若有版权问题,麻烦及时联系) 标准页面结构: HTML发展历史:  注:每一种HTML需要有对应的doctype声明. H ...

3. vue 如何点击按钮返回上一页

   1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

4. vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents.js:182 throw er; // Unhandled 'error' event

   报错信息: 10% building modules 1/1 modules 0 activeevents.js:182       throw er; // Unhandled 'error' ev ...

5. iOS----------YYModel

   weaterInfoModel *weather = [weaterInfoModel yy_modelWithDictionary:returnData[@"weatherinfo&quo ...

6. 如何获得MIUI10系统的root超级权限

   MIUI10系统有没有办法拥有root超级权限?做开发的人都清楚,android手机有root超级权限,如果手机拥有root相关权限,能够实现更强的功能,举个栗子做开发的人企业的营销部门,使用某些营销 ...

7. 关于flutter插件地图的使用flutter_map

   关于flutter插件地图的使用flutter_map flutter_map A Dart implementation of Leaflet for Flutter apps.一个基于leafle ...

8. JVM远程调试功能

   有时候想调试线上的程序 可以启用远程调试功能 在本地调试远程代码. 远程JVM启用调试模式 /usr/local/jdk/bin/java -server -Xms256m -Xmx256m -XX: ...

9. Python运算符之翩若惊鸿，婉若游龙

   python中的运算符算术运算符:主要用于两个对象算数计算(加减乘除等运算)比较运算符:用于两个对象比较(判断是否相等.大于等运算)赋值运算符:用于对象的赋值,将运算符右边的值(或计算结果)赋给运算符 ...

10. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...