vue中生成二维码
<template>
<div id="qrcode" ></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
name: "n-qr",
props: {
value: {
type: String
},
options:{
type:Object,
default:function() {
return {
width: ,
height: ,
};
}
}
},
watch: {
value(v){
this.qrcode.makeCode(v);
},
},
mounted(){
this.qrcode = new QRCode("qrcode", this.options);
this.qrcode.makeCode(this.value);
}
}
</script>
使用:
<nqr v-model="qrUrl" :options="options" class="qrcode"></nqr>
import nqr from "./nQr.vue";
export default {
components: {
nqr
},
data() {
return {
qrUrl: "",
options: {
width: ,
height:
},
createTime: ""
};
},
vue中生成二维码的更多相关文章
- vue 中生成二维码之爬坑之路
最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...
- 在java中生成二维码,并直接输出到jsp页面
在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- .net在网页中生成二维码和条形码
二维码: 1.下载ThoughtWorks.QRCode.dll文件 2.创建Web项目,添加引用刚才下载的文件 3.在项目中添加aspx窗体,编写代码如下 <%@ Page Language= ...
- Vue——前端生成二维码
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...
- 【swift】ios中生成二维码
ios开发中可以自己代码生成二维码,需要使用到一个框架 CoreImage CoreImage框架可以做滤镜,Gif动图,二维码等 先看效果图 下面直接贴上代码(OC也是下面一样的流程) func c ...
- ios 中生成二维码和相册中识别二维码
iOS 使用CIDetector扫描相册二维码.原生扫描 原生扫描 iOS7之后,AVFoundation让我们终于可以使用原生扫描进行扫码了(二维码与条码皆可)AVFoundation可以让我们从设 ...
- uniapp中生成二维码(附代码和插件)
wxqrcode.js文件: https://github.com/Clearlovesky/-js-jq-/tree/master/wxqrcode // 引入二维码库 import QR fro ...
- vue环境中生成二维码
<template><div><div id='code'></div><canvas id="canvas">< ...
随机推荐
- 星云STS 常用配置
STS4 下载地址:https://spring.io/tools (这个版本没有tomcat插件) STS3 下载地址:https://spring.io/tools3/sts/all ( ...
- Openfire 单人聊天和多人聊天(发送消息、接收消息)
Openfire 单人聊天和多人聊天(发送消息.接收消息) 一.单人聊天 1)发送消息: 首先要获取一个聊天窗口,getConnection()为获取连接connection的方法,调用getFrie ...
- Object type TYPE failed to create with error
ORA-39083: Object type TYPE failed to create with error: ORA-02304: invalid object identifier litera ...
- mybatis查询结果和接收的不一样
记一次大坑:mybatis查询结果和接收的不一样,折腾我好几个小时. 先上代码:代码是要查询排名,sql执行的结果 SELECT b.operator_id, b.class_count, b.cla ...
- SAP Parallel Accounting(平行分类账)业务配置及操作手册
目录 SAP Parallel Accounting(平行分类账业务)配置及操作手册 SAP Parallel Accounting(平行分类账业务)配置及操作手册 Overview 业务说明 为了适 ...
- springboot aop的execution 表达式详解
Aspectj切入点语法定义 在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execu ...
- IE7下onclick事件失效的问题
http://blog.csdn.net/spy19881201/article/details/11066975?locationNum=15 $('#abc').unbind('click').c ...
- mac上制作ubuntu引导盘
https://help.ubuntu.com/community/How%20to%20install%20Ubuntu%20on%20MacBook%20using%20USB%20Stick h ...
- gitlab-ci + k8s 之gitlab-ci(一)
目前常用的持续集成工具主要是jenkins与gitlab-ci ,我已在另一博文中详细记录了jenkins部署过程(其中包括gitlab的搭建),此篇介绍gitlab-ci的使用. 背景介绍 GitL ...
- lamda表达式和stream
stream主要用于处理数据,看一下jdk的文档,并且主要处理集合对象: int sum = widgets.stream() .filter(w -> w.getColor() == RED) ...