vue使用qrcode插件生成二维码
参考:https://www.jianshu.com/p/d3883e020d99
步骤:
第一步:vue-cli下载插件
cnpm install --save qrcodejs2
第二步:组件中引入插件
<template>
<div>
<div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode -->
</div>
</template> <script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name : 'test',
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
})
},
}
}
</script>
vue使用qrcode插件生成二维码的更多相关文章
- Vue使用QRCode.js生成二维码
1.安装qrcode npm install qrcode 2.组件中引入qrcode import QRCode from 'qrcode' 3.html代码 <div><span ...
- qrcode插件生成二维码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 利用QrCode.Net生成二维码 asp.net mvc c#
利用QrCode.Net生成二维码 asp.net mvc c# 里面介绍了.net的方式及js的方式,还不错. 里面用到的qrcode.net的类库下载地址:https://qrcodenet.co ...
- QRCode.js生成二维码
QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...
- qrcode.js生成二维码因字符串过长而报错
前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码
1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...
- nuxt使用QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...
- QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...
随机推荐
- About Gnu Linker1
1 OverView ld combines a number of object and archive files, relocates their data and ties up symbol ...
- 数据库-Oracle的使用
数据库的作用不言而喻,Oracle 作为一个主流的数据库,了解更是需要的 安装好oracle之后,登录初始账号,一般而言呢,我就新建一个用户, --创建新用户,用户名为JohnWu ,密码为 root ...
- Python课程第二天作业
一.统计字符串格式 要求: # 1.统计元组中所有数据属于字符串的个数,提示: isinstance() # 数据: t1 = (1, 2, '3', '4', 5, '6') # 结果: 3 代码 ...
- vue双向绑定的简单实现(原创)
简单模拟一下vue的双向绑定实现,代码比较粗糙,菜鸟一枚,欢迎各位大佬斧正 1.实验环境: 利用a.b两个input,a代表页面中的数据,b代表data中的数据 2.原理: 利用Object.defi ...
- Python全栈开发记录_第九篇(面向对象(类)的学习)
有点时间没更新博客了,今天就开始学习类了,今天主要是面向对象(类),我们知道面向对象的三大特性,那就是封装,继承和多态.内容参考该博客https://www.cnblogs.com/wupeiqi/p ...
- JAVA正则表达式匹配,替换,查找,切割(转)
import java.util.ArrayList; import java.util.regex.Matcher; import java.util.regex.Pattern; public c ...
- hyper-v下的ubuntu虚拟机分辨率修改
修改/etc/default/grub sudo vim /etc/default/grub 改变前: GRUB_CMDLINE_LINUX_DEFAULT="quiet splash&qu ...
- 根据URL地址获取对应的HTML,根据对应的URL下载图片
核心代码(获取HTML): #region 根据URL地址获取信息GET public static String GetResult(string url) { return GetResult(u ...
- vue项目中如何使用多语言(vue-i18n)
因项目需要,需要使用多语言,特此记录使用方法. 第一步:安装vue-i18n npm install vue-i18n 第二步:在生成的i18n文件夹中的index.js里引入vue-i18n 第三步 ...
- zabbix解决监控图中出现中文乱码问题
首先确定zabbix开启了中文支持功能:登录到zabbix服务器的数据目录下(前面部署的zabbix数据目录是/data/www/zabbix),打开 locales.inc.php文件[root@Z ...