vue实现二维码生成并跳转

原创

已于 2022-10-08 20:11:53 修改 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-07-01 19:07:38 首次发布

本文介绍了如何在 Vue 项目中使用 qrcodejs2 库来生成二维码，并提供了安装步骤和快捷代码复制方法。同时，也提到了利用在线二维码生成器进行快速转换的选项。

第一步：安装 qrcodejs2

cnpm i -S qrcodejs2 //执行此命令

安装成功如下：

第二步：ctrl +c以下代码 ok

<template>
    <div class="box">
        <div>
            <span ref="qrCodeUrl"></span>
        </div>
    </div>
</template>
<script>
import QRCode from "qrcodejs2";

export default {
    data() {
        return {
        };
    },
    components: {
  
},
    
    mounted() {
        this.creatQrCode();
    },
    methods: {
        creatQrCode() {
            let a = new QRCode(this.$refs.qrCodeUrl, {
                text: "https://www.baidu.com/", // 需要转换为二维码的内容
                width: 200,
                height: 200,
                colorDark: "black", //#000000为黑色
                colorLight: "white",