vue生成二维码

vue-qrcode一款前端生成二维码的vue组件，支持ie10及以上ie浏览器和现代浏览器。vue-qrcode支持设置二维码大小、间距、qrcode版本、前景色背景色和指定渲染成svg或图片等，也可以导出图片和数据功能强大。

官方网站

https://github.com/fengyuanchen/vue-qrcode

NPM下载

npm install @chenfengyuan/vue-qrcode vue

本站下载

下载vue-qrcode文件

运行效果

VUE完整代码

<template>
  <div id="app">
    <qrcode :value="text" :options="ops"></qrcode>
  </div>
</template>
<script>
//导入vue和vue-qrcode
import Vue from "vue";
import VueQrcode from "@chenfengyuan/vue-qrcode";
//注册vue-qrcode组件
Vue.component(VueQrcode.name, VueQrcode);

export default {
  name: "App",
  data() {
    return {
      text:'http://www.itxst.com',//二维码内容
      ops: {
        errorCorrectionLevel: "L", //觉错级别
        type: "image/jpeg", //DataURL格式
        margin: 1, //间距
        width:200, //二维码宽度
        color: {
          dark: "#000000", //前景色
          light: "#ebebeb", //背景色
        },
      },
    };
  },
  methods: {},
};
</script>

例子

errorCorrectionLevel属性

type属性

输出格式，支持png, svg, utf8默认png

margin属性

二维码距离图片的边距，也可以理解成二维码的白边宽度。

width属性

二维码的宽度和高度，因为二维码是正方形所有设置宽度就可以

color属性

color: {
         dark: "#000000", //前景色
         light: "#ebebeb", //背景色
     },

二维码中间加logo

官方并没有提供在二维码中间加logo发方法，但是我们可以变通一下通过css在二维码上面做一个图片浮动层达到看起来中间有个logo的效果，这时需要把纠错级别设置高一点。

在线试一试