精华内容
下载资源
问答
  • 下载 npm install vue_qrcodes 代码

    下载
    npm install vue_qrcodes
    代码

    在这里插入图片描述

    展开全文
  • VUE 生成带Logo二维码

    千次阅读 2019-06-21 17:27:08
    原文: ...npm install vue_qrcodes <template> <div> <qrcode :url="data.url" :iconurl="data.icon" :wid="200" :hei="200" :imgwid="53" :imghei="53"></qrcode>...

    原文:

    输入命令行下载

    npm install vue_qrcodes

     

    <template> 
        <div> 
         <qrcode :url="data.url" :iconurl="data.icon" :wid="200" :hei="200" :imgwid="53" :imghei="53"></qrcode>
        </div>
    </template> 
    <script>
    import qrcode from 'vue_qrcodes'
    export default {
      name: 'qrcode',
      components:{
          qrcode
      },
      data(){
        return{
           data:{
              url:"https://cn.vuejs.org/",
    	  icon:"https://cn.vuejs.org/images/logo.png",
           }
        }
      }
    }
    </script>

     

    原文链接:https://blog.csdn.net/weixin_41129148/article/details/87092980

    展开全文
  • 最近的项目上有个需求,生成带logo二维码,网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用,翻阅了大量资料后,我找到了qrcode-vue这款基于vue生成二维码的插件,非常好用,分享给大家。官网地址...

    最近的项目上有个需求,生成带logo的二维码,网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用,翻阅了大量资料后,我找到了qrcode-vue这款基于vue的生成二维码的插件,非常好用,分享给大家。官网地址点击进入:qrcode-vue
    在这里插入图片描述
    由于某些原因,我把相关参数,和备注再用红笔标出,望各位遇到问题动手去操作尝试一下,认真仔细的好好看看文章。
    在这里插入图片描述

    安装组件

    npm install --save qrcode.vue # yarn add qrcode.vue

    html部分

    //引用组件
    <qrcode-vue
    	id="qrcodeBox" 
    	:size="qrcodeVue.size"
    	:value="qrcodeVue.value"
    	:logo="qrcodeVue.logo"
    	:bgColor="qrcodeVue.bgColor"
    	:fgColor="qrcodeVue.fgColor"
    ></qrcode-vue>
    

    js部分

    import qrcodeVue from "qrcode-vue";
    components: {
      qrcodeVue
    },
    
    data() {
    	return {	 
          qrcodeVue: {
            size: 250,
            bgColor: "#fff",
            fgColor: "#000",
            value: "https://www.baidu.com/",	//二维码地址
            logo: require("@/assets/images/qrLogo.jpg")	//logo图片
          }
    	}
    }
    
    methods: {
        //生成二维码
        getQRcode() { 
          this.qrcodeVue.value = "www.baidu.com";	// 二维码内容
        },    
        //下载图片
        downsQRcode() {
          //找到canvas标签
          let myCanvas = document.getElementById("qrcodeBox").getElementsByTagName("canvas");
          let img = document
            .getElementById("qrcodeBox")
            .getElementsByTagName("img");
          // // //创建一个a标签节点
          let a = document.createElement("a");
          // //设置a标签的href属性(将canvas变成png图片)
          let imgURL = myCanvas[0].toDataURL("image/jpg");
          let ua = navigator.userAgent;
          if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) {
            // IE内核 并且  windows系统 情况下 才执行;
            var bstr = atob(imgURL.split(",")[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            var blob = new Blob([u8arr]);
            window.navigator.msSaveOrOpenBlob(blob, "商品二维码" + "." + "png");
          } else if (ua.indexOf("Firefox") > -1) {
            //火狐兼容下载
            let blob = this.base64ToBlob(imgURL); //new Blob([content]);
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
            a.download = " "; //下载图片名称,如果填内容识别不到,下载为未知文件,所以我这里就不填为空
            a.href = URL.createObjectURL(blob);
            a.dispatchEvent(
              new MouseEvent("click", {
                bubbles: true,
                cancelable: true,
                view: window
              })
            ); //兼容火狐
          } else {
            //谷歌兼容下载
            img.src = myCanvas[0].toDataURL("image/jpg");
            // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
            a.href = img.src;
            //设置下载文件的名字
            a.download = "商品二维码";
            //点击
            a.click();
          }
        },
    }
    

    大功告成

    展开全文
  • 经过测试,通过QRcode.jar里的生成二维码方法生成带LOGO二维码,代码中会将LOGO调整为固定大小。
  • vue生成二维码二维码图片

    千次阅读 2020-07-15 16:52:33
    一、生成简单的二维码(不图片) 1.引入插件 npm install qrcode --save 2.页面中使用 <div id="qrcode" class="erweima"></div> 页面中引入 import QRCode from "qrcodejs2"; methods: { qrcode...

    一、生成简单的二维码(不带图片)
    1.引入插件

    npm install qrcode --save
    

    2.页面中使用

    <div id="qrcode"  class="erweima"></div>
    

    页面中引入

    import QRCode from "qrcodejs2";
    
    methods: {
          qrcode() {
          this.$nextTick(() => {
            let qrcode = new QRCode("qrcode", {
              width: 320,
              height: 320, // 高度
              text: 'http://www.baidu.com', // 二维码内容
              render: "canvas",   //设置渲染方式(有两种方式 table和canvas,默认是canvas)
              background: "#f0f",
              foreground: "#ff0",
              src: this.img1, //二维码中间的图片
              correctLevel: 0   // 容错率
            });
          });
        },
    
    mounted () {
        this.qrcode()
    }
    

    二、中间带有图片的二维码
    1.引入插件

    npm install vue-qr --save
    

    2.页面使用

    <vue-qr  
    class="erweima"  
    :logoSrc="imageSrc"    //中间图片地址
    text="http://www.baidu.com"  //二维码跳转地址
    :size="400"     //二维码大小
    ></vue-qr>
    
      <script>
    import VueQr from 'vue-qr';
    export default {
        data () {
          return {
            imageSrc:'../src/assets/logo.png',
            }
        },
       components: {
        VueQr
      },
      }
     </script>
    

    在这里插入图片描述
    拿走,不用谢!!!送人玫瑰,手留余香
    在这里插入图片描述

    展开全文
  • 条形码:... //安装 cnpm install @xkeshi/vue-barcode //main.js中引入 ...import VueBarcode from '@xkeshi/vue-barcode' ...Vue.component('barcode', VueB...
  • appSrc 被生成二维码连接(必填) logoSrc 二维码中间logo图片(选填)默认无 size 二维码尺寸(选填)默认150 2、组件代码 <template> <vue-qr :logo-src="logoSrc" :size="size" :margin="0" :auto...
  • vue生成带logo二维码 这里运用了一个插件 vue-qr npm install vue-qr --save <template> <div> <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc...
  • 纯前端 HTML / Vue二维码生成、扫描、识别、解析、扫一扫 该Demo功能共分为:HTML版 和 Vue版 两个版本! 不依赖任何关于微信环境、微信JS-SDK,微信受权等! 支持二维码生成,实时动态生成和渲染! 支持扫一扫...
  • vue-前端生成二维码 1、下载vue-qr npm install vue-qr --save 2、引入vue-qr模块 import vueQr from ‘vue-qr’ 3、使用 <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> // logoSrc为...
  • VUE使用QRcode或者vue-qr生成二维码

    千次阅读 2019-04-09 15:36:54
    这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm install qrcodejs2 import QRCode from 'qrcodejs2' <div ...
  • vue生成二维码

    2021-01-15 13:31:24
    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。 方式一:qrcode npm npm install --save qrcodejs2 ...
  • 首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' ...components: { VueQr // 二维码组件 }, ... logo: '', value: '' } }
  • vue-qr生成二维码

    2021-02-05 10:50:31
    logoSrc为在二维码中间实现的logo图片,text为要生成二维码内容,通常为一个url 创建方法,分别给imageUrl与shareUrl赋值,这里有一点要注意的是,如果使用的是本地的图片,则imageUrl=require(“ xxx”)----xxx...
  • 前言 前端vue生成二维码的需求 安装vue-qr npm install vue-qr --save ... // logoSrc 是生成二维码带logo <vue-qr :logoSrc="imageHeadUrl" :text="Top_up_balance" :size="300" >&l
  • 与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能。 方式一:qrcode npm npm install --save qrcodejs2 ...
  • Vue生成二维码

    热门讨论 2021-04-28 13:58:38
    本文主要介绍vue生成二维码 一、qrcode 1.1效果图 npm install --save qrcodejs2 1.2关键代码 <template> <div class="qrcode" ref="qrCodeUrl"></div> </template> <script> ...
  • VUEVUE使用vue-qr生成二维码

    千次阅读 2019-07-22 16:13:26
    1、安装: npm install vue-qr --save 2、导入vue项目中使用 ...vue-qr :text="config.url" :logoSrc="config.logo+ '?cache'" :logoScale="0.3" :size="200" :margin="0" colorDark="#f67b29" colorLigh...
  • vue生成二维码(中间带logo

    千次阅读 2019-12-20 10:09:18
    一开始使用qrcode生成二维码,查看源码中的参数,似乎不能带logo。单单生成二维码还是很方便的 首先输入指令 npm install qrcode --save 1 <template> <div> <qrcode-vue size="300" level...
  • vue-H5生成二维码

    2021-03-04 16:39:23
    首先安装 npm install --save qrcode-vue <template> <div class="home"> //引用组件 <qrcode-vue id="qrcodeBox" :size="qrcodeVue.... :logo="qrcodeVue.logo" :bgColor="qrcodeVue.bgColor
  • Vue项目中生成二维码

    2019-11-07 14:32:57
    本来是由后台生成二维码的,但是测试后不是很稳定,由于网络问题有时候会加载不过来。。。 之后就发现vue的两个插件:vue-qart和vue-qr。对比之后发现,vue-qr的配置更全一些,所以选择了vue-qr vue-qart: 1...
  • vue-qr一款可以生成带logo和背景图片二维码vue前端插件,功能强大但使用简单,你可以使用该插件生成各种漂亮的二维码图片。 点击这里进入demo

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 556
精华内容 222
关键字:

vue生成带logo的二维码

vue 订阅