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= ...
随机推荐
- note 9 列表、时间复杂度、排序
列表 List +内建(built-in)数据结构(data structure),用来存储一系列元素(items) 如:lst = [5.4,'hello',2] 前向索引.后向索引.切片.拼接.成 ...
- windows环境下ElasticSearch6 安装head插件
转: https://blog.csdn.net/shubingzhuoxue/article/details/80998738 https://blog.csdn.net/camelcanoe/ar ...
- Docker使用Link与newwork在容器之间建立连接
一,使用 --link容器互联 docker 默认使允许container 互通的(通过-icc=false 关闭互通)同一个宿主机上的多个docker容器之间如果想进行通信,可以通过使用容器的ip地 ...
- React 环境增加Redux ,React-Redux
引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用. 简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写. 更功利的表达就是: ...
- 请简单介绍一下BootStrap:
1.轻量级的开发响应式页面的框架 2.全局CSS,组件,JS插件 3.栅格系统:将页面分为12个等分(CSS3@media媒体查询) 4.col-xs-*:手机屏幕 5.col-sm-*:平板 6.c ...
- MTK之DrvGen的使用
打开mcu\custom\drv\Drv_Tool [L206X_code20190321\custom\drv\Drv_Tool]下的DrvGen.exe,如下图所示: 点击"Open&q ...
- github PageHelper使用PageInfo数据错乱问题
如果出现了数据错乱,检查一下代码是否正确 PageHelper.start(1,10); List<MyEntity> lists = mapper.query(); PageInfo&l ...
- TinkPHP框架学习-04命名空间
1-----命名空间 2-----调用其他控制器的方法 3-----U()函数 一命名空间 ①看做是虚拟目录 --ThinkPHP/Library 初始命名空间 --在Library文件夹下的所有文件 ...
- 搭建Android浏览器壳子
搭建Android浏览器壳子 不久前我们要做一个Android端的手机APP,但没有用Android原生的组件, 而是把这个APP做成了一个访问某一固定IP的浏览器,即单纯的一个壳子: 具体的内容用V ...
- Ubuntu下安装pytorch(GPU版)
我这里主要参考了:https://blog.csdn.net/yimingsilence/article/details/79631567 并根据自己在安装中遇到的情况做了一些改动. 先说明一下我的U ...