<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中生成二维码的更多相关文章

  1. vue 中生成二维码之爬坑之路

    最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...

  2. 在java中生成二维码,并直接输出到jsp页面

    在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...

  3. C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  4. .net在网页中生成二维码和条形码

    二维码: 1.下载ThoughtWorks.QRCode.dll文件 2.创建Web项目,添加引用刚才下载的文件 3.在项目中添加aspx窗体,编写代码如下 <%@ Page Language= ...

  5. Vue——前端生成二维码

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...

  6. 【swift】ios中生成二维码

    ios开发中可以自己代码生成二维码,需要使用到一个框架 CoreImage CoreImage框架可以做滤镜,Gif动图,二维码等 先看效果图 下面直接贴上代码(OC也是下面一样的流程) func c ...

  7. ios 中生成二维码和相册中识别二维码

    iOS 使用CIDetector扫描相册二维码.原生扫描 原生扫描 iOS7之后,AVFoundation让我们终于可以使用原生扫描进行扫码了(二维码与条码皆可)AVFoundation可以让我们从设 ...

  8. uniapp中生成二维码(附代码和插件)

    wxqrcode.js文件:  https://github.com/Clearlovesky/-js-jq-/tree/master/wxqrcode // 引入二维码库 import QR fro ...

  9. vue环境中生成二维码

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

随机推荐

  1. 使用 Node.js 搭建API 网关

    外部客户端访问微服务架构中的服务时,服务端会对认证和传输有一些常见的要求.API 网关提供共享层来处理服务协议之间的差异,并满足特定客户端(如桌面浏览器.移动设备和老系统)的要求. 微服务和消费者 微 ...

  2. VBA二次学习笔记(3)——批量合并单元格

    说明(2018-9-16 22:17:49): 1. 昨天运动会,100米八个人跑了第五,400米五个人跑了第三,得了个榨汁机.终于结束了哈哈哈!之前一个星期紧张的天天拉肚子,真是没出息..不过养成了 ...

  3. maven添加jetty插件,同时运行多个实例

    <plugins> <!-- jetty插件 --> <plugin> <groupId>org.eclipse.jetty</groupId&g ...

  4. WebSphere MQ中的CCSID

    CCSID是一个字符集的标识.作为unicode标准通过定义一个字符集内每个字符要对应那个数字值的方式定义了一个字符集.这说明CCSID就是一个定义字符集顺序的标识数码罢了.IBM的字符标识架构在文档 ...

  5. linux 测试网络url命令

    1.curl 地址 或者 wget url地址 [hxxxx@iZ23vy2msooZ ~]$ curl www.baidu.com<!DOCTYPE html><!--STATUS ...

  6. CentOS安装和配置Nginx

    1. 首先Nginx官网找到最新的稳定版本,网站地址:http://nginx.org/en/linux_packages.html#stable 在/etc/yum.repos.d 下面创建一个文件 ...

  7. Git-简单的利用SourceTree提交代码(转载)

    http://www.cnblogs.com/shenyangxiaohuo/p/5239723.html

  8. apache 2.4.23 只能本地访问,其他用户不能访问,提示You don't have permission to access

    这个版本的httpd.conf的配置方法跟原版本的设置不一样了. 需要在目录安全配置中 修改为 Require all granted 比如  把Require local 修改为Require al ...

  9. [原]CentOS7安装Rancher2.1并部署kubernetes (二)---部署kubernetes

    ##################    Rancher v2.1.7  +    Kubernetes 1.13.4  ################ ##################### ...

  10. CF 634A Island Puzzle

    A. Island Puzzle time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...