精华内容
下载资源
问答
  • vue如何生成二维码

    2021-03-08 15:46:59
    使用vue-qr npm npm install vue-qr --save import import vueQr from 'vue-qr' 使用 <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: ...

    使用vue-qr
    npm

    npm install vue-qr --save
    

    import

    import vueQr from 'vue-qr'
    

    使用

    <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
     
    <script>
        export default {
            name: "qecode",
            data() {
                return {
                    imageUrl: require("../assets/logo.png"),
                }
            },
            components: {
                vueQr
            },
        },
    }
    </script>
    
    展开全文
  • vue生成二维码的插件~避免踩坑mark

    千次阅读 2019-04-24 11:49:22
    vue生成二维码的两个插件 前段时间有个需求需要用到二维码,特意找了一些相关插件,发现了两个还是好用的分享给大家。 简单介绍一下如何避免踩坑。 第一种方法 qrcodejs2 第一步:下载插件qrcodejs2 npm install ...

    vue生成二维码的两个插件

    前段时间有个需求需要用到二维码,特意找了一些相关插件,发现了两个还是好用的分享给大家。
    简单介绍一下如何避免踩坑。

    第一种方法 qrcodejs2

    • 第一步:下载插件qrcodejs2

    npm install qrcodejs2 --save

    • 第二步:给你准备放入二维码的标签一个id属性 ( 例如:id=“qrcode”)
    <template>
        <div>
            <div id="qrcode"></div> //必须是id 和实例化的第一参数对应
        </div>
    </template>
    
    • 通过在methods中写入一个方法用来调用实现二维码的生成, 例如需要二维码弹出的时候调用
    • 我这里写的是在组件渲染完毕后直接渲染出来
    <script>
    	import QRCode from 'qrcodejs2';
    	export default {
    	    mounted () {
    	        this.qrcode(); //调用二维码生成的方法
    	    },
    	    methods: {
    	        qrcode () {
    	            // 和div的id相同 必须是id  class类名会报错
    	            // 第二参数是他的配置项
    	            let qrCode = new QRCode('qrcode', {
    	                width: 150,
    	                height: 150,
    	                text: 'http://www.baidu.com',
    	                colorDark: '#ccc',
    	                colorLight: 'yellow'
    	            })
    	        }
    	    }
    	}
    </script>
    

    在这里插入图片描述
    在这里插入图片描述

    • 第一个是基础款,第二个是加了colorDark的属性

    参数说明:

    属性 是否必填
    width (必填项) 宽度(Number)
    margin(必填) 边距-默认值为20
    bgSrc(选填) 背景图片
    logoSrc(选填) 中间的图片
    gifBgSrc(选填) 动态背景图 (设置此选项会影响性能)
    colorDark(选填) 二维码颜色(实点颜色)
    colorLight(选填) 二维码背景填充色
    callback(选填) 生成的二维码 Data URI,可以在回调中取得

    注意!!! width 和 height必须是数值,如果写成 width:‘150px’ 就会报错❤

    第二种方法 vue-qr

    这个插件比起第一个多了一些功能,例如背景图片,类似我们微信个人名片的logo头像,更有趣的是可以社做动态gif图片作为背景图
    • 第一步:下载插件vue-qr

    npm install vue-qr --save

    • 第二步:引入组件,挂载到components中,在template里写入组件
    <template>
        <div>
           <VueQr :margin='20' :size='200' :text='config.text'></VueQr>
        </div>
    </template>
    
    • 第三步:在data中默认返回一个二维码的配置项参数
    <script>
    import VueQr from 'vue-qr';
    export default {
        data () {
            return {
                config: {
                    text:'123',		//必须写text属性
                    bgSrc: require('../img/chicken.jpg'),
                    logoSrc: require('../img/dao.jpg'),
                    gifBgSrc: require('../img/dog.gif')
                }
            }
        },
        components: {
            VueQr
        }
    }
    </script>
    

    大概就是这样子 我写了三个跳转百度页面的二维码
    在这里插入图片描述

    最后要注意的是,引入图片文件的时候注意使用require引入,直接写图片路径是会报错的

    参数说明:

    属性 是否必填
    text (必填) 可以写路径或者文字,扫描后想要跳转的路径或者显示的文字
    size (必填) 二维码尺寸 长宽一致, 包含外边距
    margin(必填) 二维码距离外边框的边距 - 默认值为20
    bgSrc(选填) 背景图片
    logoSrc(选填) 中间的图片
    gifBgSrc (选填) 动态背景图 (设置此选项会影响性能)
    colorDark(选填) 二维码颜色(实点颜色)
    colorLight(选填) 二维码背景填充色
    callback(选填) 生成的二维码 Data URI,可以在回调中取得

    第一次发帖,做的不够好大家多担待!如有转帖请注明出处,最后欢迎大牛们来指点,谢谢!

    展开全文
  • // 二维码地址 colorDark : '#000' , colorLight : '#fff' } ) ; } } } ; < / script > < style > . qrcode_box { width : 2.58 rem ; height : 2.58 rem ; margin - left : ...

    第一步 下载插件

    cnpm install --save qrcodejs2
    

    第二步,在组件中使用

    <template>
        <div class="qrcode_box">
            <div id="qrcode"></div>
        </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', // 二维码地址
            colorDark: '#000',
            colorLight: '#fff'
          });
        }
      }
    };
    </script>
    
    <style>
    .qrcode_box {
      width: 2.58rem;
      height: 2.58rem;
      margin-left: 2.46rem;
      margin-top: 0.26rem;
    }
    </style>
    
    展开全文
  • 1.需求 我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的...3.生成二维码的页面 <div id="qrCode" ref="qrCodeDiv"></div> 4.js里

    1.需求
    我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的几个问题,记录一下~!
    2.具体过程如下
    1.安装 qrcodejs2

    	npm install  qrcodejs2 --save
    

    2.在main.js或者是需要使用的页面引入

    import QRCode from 'qrcodejs2'
    

    3.生成二维码的页面

      <div id="qrCode" ref="qrCodeDiv"></div>
    

    4.js里的方法

     //打印二维码的方法
          bindQRCode: function () {
            new QRCode(this.$refs.qrCodeDiv, {
              text: '扫描二维码之后展示的内容'
              width: 100,
              height: 100,
              colorDark: "#333333", //二维码颜色
              colorLight: "#ffffff", //二维码背景色
              correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
            })
          },
    

    3.打印内容
    这里打印的话有好几种方法,我就简单的讲一下这几种打印方法的注意事项。
    vue的打印插件

    cnpm i vue-print-nb -S
    
    . 在需要打印的位置使用
    <div id="dialogContent">
      <p style="text-align: center">
        {{ form.status === '条件' ? '标题一' : '标题二' }}
      </p>
      <div class="table-layout">
        <!--内容-->
      </div>
    </div>
    
    4. 打印
    <button v-print="'#dialogContent'">打印</button>
    

    这种方法的缺点就是只能打印可见区域,不能分页打印
    方法二:print.js

    1. 安装依赖
    cnpm install vuePlugs_printjs -S
    
    2. 引入
    import Print from '@/plugins/print'   // 下载到本地地址
    Vue.use(Print)
    
    3. 使用
    <template>
        <div ref="print">
        <!--打印内容-->
        <div class="no-print">不要打印我</div>
        </div>
        <a-button @click="prints">打印</a-button>
    </template>
    <script>
    export default {
      data () {
        return {}
      },
      methods: {
        prints () {
          this.$print(this.$refs.print)
        }
      }
    }
    </script>
    

    注意:
    需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
    4.总结
    这里我就粗略的讲了一下这几种方法是怎么实现的,其实后续还有很多可以拓展的问题需要解决,如果是弹窗打印的话会出现好几个问题,比如说第一次弹出不加载二维码。

      let doc_body = document.body.innerHTML,
              printPart = document.getElementById("dialogContent").innerHTML;
            document.body.innerHTML = printPart;
            window.print(); //只能打印当前页面body里面的全部内容,所以打印之前,要替换body里面的内容
            document.body.innerHTML = doc_body;
            window.location.reload(false); //重新刷新页面的时候会出现首页白屏,用户体验不好
    
    

    这里虽然解决了第一次弹框没有出现二维码的问题,但是重新刷新页面的时候会出现白屏,用户体验不好,这里有待优化。暂时我也还没排查出问题出现在哪?后续会继续跟进!
    如果有什么问题,可以到下方评论区留言。如果各位大神已有解决方法,可以留言告诉我,我也参考参考~。

    展开全文
  • 这边用qrcodejs2生成的二维码,一放大就模糊了,有客户需求想要把二维码下载出来打印,一放大就模糊了,...有没有哪位大神知道如何生成放大也不会模糊的二维码,还请赐教</p>
  • 如何vue+element-ui生成二维码

    千次阅读 2019-08-23 17:26:17
    1.安装qrcode element-ui 的使用官网添加链接描述 npm install qrcodejs2 --save 2.页面引入 <template> <div>...el-button type="primary" @click="qrCode()" style="margin-...生成二维码</el-butto...
  • 意义:生成二维码的意思其实就是将一个URL地址保存在二维码中,扫描二维码的时候就指向地址,打开该URL。 步骤如下(可以参照JavaScript的二维码生成 – QRCode.js) 1、首先安装包qrcodejs2: npm install --save ...
  • 2. 在你需要用到二维码的页面引入 import QRCode from ‘qrcodejs2’ 二维码代码 我的操作逻辑是将二维码放在一个dialog里,点击打开二维码的按钮,弹出对话框 显示二维码,以下是代码: <el-button type=...
  • 客户端实现下载二维码图片(服务器端如何生成小程序二维码请看另外一篇 链接地址:https://blog.csdn.net/qq_33238562/article/details/92972684 ) <el-button v-if="isgly" type="text" @click="create...
  • 承接上文,在了解了一些背景知识后,我们现在来讲具体的纠错码如何生成。3.纠错编码:1.将数据码字分块:在我们第一篇文章里已经将数据码字全部编好了。共80个码字,我们选的版本和纠错等级为Version4,L;查阅QR码的...
  • 一、前端生成二维码功能很常见,不用想肯定得用到插件,上github上一搜索vue qrcode出来好几个插件,star并不是很多大部分都是100多个star,下面主要介绍vue-qr的使用方法和如何下载二维码到本地的方法。 二、 1....
  • 如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新...
  • <div><p>该提问来源于开源项目:Binaryify/vue-qr</p></div>
  • 简单调用就能满足网址扫码预览和分享、登录扫码认证等...API 非常简单,简单到只需要一个文本参数就能生成二维码 虽然调用简单,但也提供了强大的定制化功能 零依赖,只需要浏览器支canvas,兼容性极佳 支持 vue / rea.

空空如也

空空如也

1 2 3 4 5
收藏数 95
精华内容 38
关键字:

vue如何生成二维码

vue 订阅