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

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

    Vue——前端生成二维码

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

    方式一:qrcode

    • npm

    npm install --save qrcodejs2

    • import

    import QRCode from 'qrcodejs2’

    <div class="qrcode" ref="qrCodeUrl"></div>
     
    <script>
    methods: {
        creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: 'xxxx', // 需要转换为二维码的内容
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        },
    },
    mounted() {
        this.creatQrCode();
    },
    </script>
    

    样式(这里再提供一个给二维码添加边框的小技巧:如下图所示,我们生成的二维码是没有边框的,看起来不是很好看)

    .qrcode{
        display: inline-block;
        img {
            width: 132px;
            height: 132px;
            background-color: #fff; //设置白色背景色
            padding: 6px; // 利用padding的特性,挤出白边
            box-sizing: border-box;
        }
    }
    

    就有了下面的效果:
    在这里插入图片描述

    方式二:vue-qr

    • npm
      npm install vue-qr --save
    • import
      import vueQr from 'vue-qr’

    // logoSrc为logo的url地址(使用require的方式);text为需要转换为二维码的内容

    <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
     
    <script>
        export default {
            name: "qecode",
            data() {
                return {
                    imageUrl: require("../assets/logo.png"),
                }
            },
            components: {
                vueQr
            },
        },
    }
    
      
    展开全文
  • 主要介绍了vue中实现动态生成二维码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 利用VUE生成二维码(两种方式)

    千次阅读 2021-03-15 16:39:17
    vue有两种生成二维码的方式,qrcode、vue-qr(有icon);

    利用Vue生成二维码

    Author:kak

             vue有两种生成二维码的方式,qrcode、vue-qr(有icon);

    1、qrcode

    npm ``install` `--save qrcodejs2
    //所需页面导入
    import QRCode from 'qrcodejs2'
    
    <div class="qrcode" ref="qrCodeUrl"></div>
    <script>
    import QRCode from 'qrcodejs2'
    export default {
      data() {
        return {
      },
      methods: {
        creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        },
    },
    mounted() {
        this.creatQrCode();
    },
    };
    </script>
    

    在这里插入图片描述

    2、vue-qr

    可以增加icon

    npm install vue-qr --save
    import vueQr from 'vue-qr'
    
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
     
    <script>
        export default {
            name: "qecode",
            data() {
                return {
                    imageUrl: require("../img/logo.png"),//icon路径
                }
            },
            components: {
                vueQr
            },
        },
    }
    </script>
    

    在这里插入图片描述

    完整代码

    <template>
      <div>
        <div class="qrcode" ref="qrCodeUrl"></div>
        <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
      </div>
    </template>
    
    <script>
    import QRCode from "qrcodejs2";
    import vueQr from "vue-qr";
    export default {
      data() {
        return {
          imageUrl: require("./sw.jpg"),
        };
      },
      components: {
        vueQr,
      },
      methods: {
        creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        },
      },
      mounted() {
        this.creatQrCode();
      },
    };
    </script>
    
    
    <style scoped>
    .qrcode {
      display: inline-block;
      width: 132px;
      height: 132px;
      background-color: #fff;
      padding: 6px;
      box-sizing: border-box;
    }
    </style>
    
    展开全文
  • 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> ...

    本文主要介绍vue生成二维码

    一、qrcode

    1.1效果图

    在这里插入图片描述

    npm install --save qrcodejs2
    
    1.2关键代码
    <template>
    	<div class="qrcode" ref="qrCodeUrl"></div>
    </template>
    <script>
    import QRCode from 'qrcodejs2'
    export default {
      name: "Index",
      data() {
        return {}
      },
      	mounted() {
    	    this.creatQrCode();
    	},
    	methods: {
    	    creatQrCode() {
    	        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
    	            text: '2021', // 需要转换为二维码的内容
    	            width: 100,
    	            height: 100,
    	            colorDark: '#000000',
    	            colorLight: '#ffffff',
    	            correctLevel: QRCode.CorrectLevel.H
    	        })
    	    },
    	},
    
    }
    </script>
    
    1.3样式
    <style scoped>
    .qrcode{
        display: inline-block;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        padding: 6px;
        box-sizing: border-box;
        margin: 6px;
    }
    </style>
    

    二、vue-qr

    vue-qr比qrcode多了一个再中间添加logo的功能

    2.1效果图

    在这里插入图片描述

    npm install vue-qr --save
    
    2.2关键代码
    <template>
    	<vue-qr :logoSrc="imageUrl" text="qrText" :size="200"></vue-qr>
    </template>
    <script>
    import vueQr from 'vue-qr
    export default {
      name: "Index",
      data() {
        return {
          imageUrl: require("../assets/logo.png"),
          qrText:"1314520",
        }
      },
      components: {
          vueQr
      },
    }
    </script>
    
    展开全文
  • cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' 并在components中注册为组件 components: { VueQr // 二维码组件 }, data() { return { config: { // 二维码...

    首先安装一下面这个插件

     cnpm install vue-qr -S
    

    接下来在需要生产并下载二维码的页面引入

    import VueQr from 'vue-qr'
    

    并在components中注册为组件

    components: {
        VueQr // 二维码组件
    },
    data() {
    	return {
    	        config: { // 二维码配置
                    logo: '',
                    value: ''
                }
    	}
    },
    methods: {
    	// 点击触发下载二维码
    	downQRImg (data, type) {
    	    this.config = {
    	        logo: '二维码中心logo',
    	        value: '二维码内容'
    	    }
    	    let timer = setInterval(() => {	// 做一个定时器防止二维码未生成时候就下载而获取不到二维码地址
    	        if (this.$refs.Qrcode.$el.src) {
    	            const iconUrl = this.$refs.Qrcode.$el.src	// 二维码地址
    	            let a = document.createElement('a')
    	            let event = new MouseEvent('click')
    	            a.download = data.TenantName	// 二维码名称
    	            a.href = iconUrl
    	            a.dispatchEvent(event)
    	            clearInterval(timer)
    	            this.$message.success('二维码已下载')
    	            this.config = {
    	                logo: '',
    	                value: ''
    	            }
    	        }
    	    }, 100)
    	},
    }
    

    在html代码里面加入以下代码

    <vue-qr
        id="qrcodeimg"
        ref="Qrcode"
        style="display:none"
        :logo-src="config.logo"
        :text="config.value"
        :size="200"
        :margin="0"
    />
    
    展开全文
  • vue生成二维码分享功能 生成二维码听起来很难,其实也很简单 先看一下效果: 效果就是这个样子 首先给要分享的dom一个点击触发事件 <!-- 分享 --> <div class="rightimg" @click="share"> <img ...
  • vue生成二维码的插件

    2019-08-23 17:57:12
    vue生成二维码的两个插件 第一种方法 qrcodejs2 下载插件qrcodejs2:npm install qrcodejs2 --save <template> <div class="qrcode2"> <!-- 必须是id 和实例化的第一参数对应 --> <div ...
  • 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...
  • vue生成二维码带图标

    2020-08-18 15:11:12
    效果 代码 npm install vue-qr --save <template> <div class="sg-qrcode"> <vue-qr :text="qrcodeText" :correctLevel="3" :size="250" :margin="10" colorDark="#2ba245
  • VUE 生成二维码插件

    2019-05-16 17:30:13
    // 生成二维码 qrcode () { let that = this; let qrcode = new QRCode('qrcode', { width: 124, height: 124, // 高度 text: this.link, // 二维码内容 // render: 'canvas' , // 设置渲染方式(有两种方式...
  • vue 生成二维码登录

    2019-11-20 18:25:35
    vue项目就不说了,不懂可以去看我之前写的搭建过程的博客!!!! 一、在cmd你的vue项目目录下面,此处安装qrcodejs2 执行命令: npm install qrcodejs2 --save 完成后在你的vue项目的package.json里面查看是否...
  • 工作中有一个将地址生成二维码,再将二维码与一张背景图合成一张海报的需求 实现 1.生成二维码 //下载插件实现 import QRCode from 'qrcode' //生成二维码的方法 url-地址;picUrl-背景图片地址; getQRpic(url, ...
  • 本人项目中,是需要实现在表格中显示支付链接,并将支付链接渲染成二维码,管理员点击二维码后,直接下载此二维码,用于分享给客户,实现h5支付功能。
  • this.loadCode = false this.$message.success('文件已下载到本地请查收') FileSaver.saveAs(content, "二维码.zip") }) }, 10) },10) } createCode(str) { new QRCode('qrcodes', { width: 130, //宽 height: ...
  • 插件:Vue Canvas Poster 网址:https://sunniejs.github.io/vue-canvas-poster/#/ 1、安装 cnpm i vue-canvas-poster --save 2、使用 <template> <div class="share wh100"> <navBar title=...
  • 下载插件 npm i qrcodejs2 引用 import QRCode from "qrcodejs2"; ...<button @click="handleDown(record)">...div id="qrcode" class="qrcode" ref="qrCodeUrl" v-show="false">... new QRCode(this
  • vue生成二维码

    千次阅读 2019-05-24 13:55:50
    纯纯的Javascript版,不依赖任何第三方包,就可以轻松地生成二维码了,支持各种自定义,可以通过自定义颜色生成各种漂亮的、有个性的二维码。 1:npm安装 $ npm install qrcanvas 2. 在用的页面引入 import { ...
  • <template> <div> <div v-show="codeId" ref="QrcodePage" style="z-index:-1111;position:absolute;left:-99999;width: 450px;height: 475px;background-size: cover...QrcodeVue :logoSrc="imageUr
  • npm i qrcode.vue -S 二、使用组件 <template> <van-popup v-model="showQr" v-bind="popupConfig" > <div class="qrcode-wrapper"> <div class="qrcode-title"> <van-icon name...
  • vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcodejs2 第二步,在组件使用 <template> ...
  • vue生成二维码并分享

    2020-08-28 20:57:47
    vue生成二维码并分享 首先,先看下这个玩意 qrcode ,不管怎么说,先 npm install qrcode,然后引入 import QRCode from "qrcode" 然后到去写下组件定义个画布 <div> <canvas id="QRCode"></...
  • vue 生成二维码

    2021-02-02 16:37:16
    一、页面中生成二维码方法 ①、首先安装qrcodejs2插件 npm install qrcodejs2 --save 注意:安装完成之后可以在main.js中全局配置,也可以在单个页面中去引用 ②、引入 1)单页面中引入 import QRCode from '...
  • vue生成二维码,并且扫码访问链接网址 1、安装 npm i qrcodejs2 2、页面引用 import QRCode from "qrcodejs2"; 3、页面添加 <p>企业链接</p> <p>{{url}}</p> <el-button size="small" ...
  • 项目需求:需要生成一个可以下载且带有边框背景的二维码 如果只用qrcode.js只能实现下载二维码,但是下载下来的二维码没有边框背景,可识度非常低,所以需要给下载的二维码加个边框,白色灰色之类的 首先下载要使用...
  • 参照了网上其他资料而写: 1,导入第三方插件 npm install --save qrcode 2,在页面上引入 import QRCode from 'qrcodejs...二维码位置</div> methods: { qrcode () { let qrcode = new QRCode('qrcode...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,979
精华内容 2,391
关键字:

vue如何生成二维码

vue 订阅