vue生成svg二维码

 qrcode.vue

// 推荐qrcode.vue插件：（支持vue2以及vue3、使用简单）
yarn add qrcode.vue --save
npm qrcode.vue --save
 
// 使用方式如下：
 
<script setup>
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
const qrcodeVal = ref('我是一个大头兵')
script>
 
<style lang="scss" scoped>
 
style>
 
 
 

qrcode

// qrcode插件
yarn add qrcode --save
npm qrcode --save
 
// 使用方式如下：
 
<script>
import QRCode from 'qrcode'; //引入生成二维码插件
export default {
  data() {
    return {
      qrUrl: location.href,
    };
  },
  mounted() {
    this.getQRCode();
  },
  methods: {
    getQRCode() {
      //生成的二维码为URL地址js
      this.qrUrl = 'https://www.baidu.com/';
      let opts = {
        errorCorrectionLevel: 'H', //容错级别
        type: 'svg', // 生成的二维码类型 "png", "svg", "utf8"
        quality: 1, // 二维码质量
        margin: 5, // 二维码留白边距
        width: 130, // 宽
        height: 130, // 高
        text: 'https://www.baidu.com/', //二维码内容
        color: {
          dark: '#333333', //前景色
          light: '#ffffff', //背景色
        },
      };
 
      let msg = document.getElementById('QRCode_header');
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log('二维码加载失败', error);
          this.$message.error('二维码加载失败');
        }
      });
    },
  },
};
script>

@qrcode/svg

貌似不支持vue3，不太推荐，太拉胯了
 
 
<script setup>
import { ref } from 'vue'
const qrcodeSvg = require('@qrcode/svg')
const svgHtml = ref(null)
svgHtml.value = qrcodeSvg('http://example.com')
console.log(qrcodeSvg('http://example.com'))
script>
 
<style lang="scss" scoped>
 
style>