<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. Flume的监控参数

    参考 flume的http监控参数说明 普通的flume启动命令 bin/flume-ng agent -c conf -f conf/flume-conf.properties -n agent - ...

  2. UEditor在asp.netMVC4中的使用,包括上传功能,粘贴表格不显示边框问题

    网页编程中在线编辑器的使用还是很重要的,最近研究了一下百度出的UEditor编辑器,把它结合到刚学的asp.netMVC+EF中,同时实现上传资料(包括图片,视频等)功能,下面就以一个最简单的新闻管理 ...

  3. ganglia-gmond.conf配置文件

    运行下列命令可以生成gmond默认配置文件: User@host:$ gmond -t 配置文件由大括弧括起来的几个section组成.这些section可以粗略划分为两个逻辑分类.第一类中的sect ...

  4. nw.js---开发一个百度浏览器

    使用nw.js开发一个简单的百度浏览器就很简单了,只需要在配置里面写入: { // "main": "index.html", "main" ...

  5. QT上位机

    程序是用QT写的,通过COM口进行数据的读取. 源码地址:https://github.com/kunkunlin/QT-SWJ

  6. Win10上使用VS2015编译Caffe2

    Caffe2的官网:https://caffe2.ai/ 1.下载.安装及相关准备 在Caffe2的官网点击"Get Started",即进入安装说明页面.官方还未提供编译好的bi ...

  7. 20.react库 入门

    vue插件: 使用方式:Vue.use(插件名称); {}/function 1.对象 export default { install(Vue,options){ } } 2.函数 export d ...

  8. P1115 最大子段和

    题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NNN,表示了序列的长度. 第二行包含NNN个绝对值不大于100001000010000的 ...

  9. docker 打卡

    create 2019/01/01 mod 2019/02/02 安装没得技术含量,看过菜鸟教程和纯洁写的博客,感觉so easy 命令: yum install docker 启动 设置开机启动 s ...

  10. 剑指offer——python【第36题】两个链表的第一个公共结点

    题目描述 输入两个链表,找出它们的第一个公共结点 思路 注意,这里的公告结点的意思是相同的点,不仅值相同,next也相同,那么同理公共结点后面的点也是不仅值相同,而且next也相同,这样的话,就可以把 ...