vue项目生成二维码_vue2 生成二维码

简易二维码（vue2/3）

1、安装依赖包

在Vue 中使用 qrcode 库生成二维码，你首先需要安装该库。你可以使用 npm 或 yarn 安装：
npm install qrcode

或者
yarn add qrcode

2、简单示例

然后，你可以在你的 Vue 3组件中使用这个库。下面是一个简单的示例：

<template>
  <div>
    <h1>示例</h1>
    <div style="display: flex;">
      <el-input v-model="text" placeholder="输入要生成二维码的文本" style="width: 200px;"/>
      <button @click="generateQRCode">生成二维码</button>
    </div>
    <div v-if="qrCodeDataUrl">
      <img :src="qrCodeDataUrl" alt="QR Code" />
    </div>
  </div>
</template>
 
<script setup>
import QRCode from 'qrcode'
import { ref } from 'vue'
const text = ref('')
const qrCodeDataUrl = ref(null)
const generateQRCode = async () => {
  const dataUrl = await QRCode.toDataURL(text.value)
  qrCodeDataUrl.value = dataUrl
}
</script>

vue2:

template>
  <div>
    <h1>示例</h1>
    <div style="display: flex;">
      <el-input v-model="text" placeholder="输入要生成二维码的文本" style="width: 200px;"/>
      <button @click="generateQRCode">生成二维码</button>
    </div>
    <div v-if="qrCodeDataUrl">
      <img :src="qrCodeDataUrl" alt="QR Code" />
    </div>
  </div>
</template>
 
<script setup>
import QRCode from 'qrcode'
export default {
    data() {
      return {
        text: "",
        qrCodeDataUrl: null,
      };
    },
    methods: {
      generateQRCode  async () {
        try {
          const dataUrl = await QRCode.toDataURL(this.text);
          this.qrCodeDataUrl = dataUrl;
        } catch (error) {
          console.error("Error generating QR Code:", error);
        }
      },
    },
  };
</script>

效果图：

在这个示例中，你可以在输入框中输入文本，然后点击按钮生成相应的二维码。qrcode 库的 toDataURL 方法用于将文本转换为数据 URL，然后通过 Vue 绑定将生成的数据 URL 显示为图片。

使用vueqr（功能更加全面）

官网地址：vue-qr - npmvue-qr - npmvue-qr - npm

1、安装

npm install vue-qr --save

2、示例

<template>
  <div>
    <h1>示例</h1>
    <div style="display: flex">
      <el-input v-model="text" placeholder="输入要生成二维码的文本" style="width: 200px" />
      <el-color-picker v-model="color" show-alpha />
    </div>
    <div>
      <vue-qr
        :text="text"
        :callback="test"
        qid="testid"
        :logoSrc="logosrc"
        :bgSrc="BgSrc"
        margin="0"
        colorLight="transparent"
        backgroundDimming="rgba(999, 999, 999, 0.5)"
        colorDark="transparent"
      ></vue-qr>
      <br>
      <button @click="upDown">下载二维码</button>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import logosrc from '../assets/kun.png' //logo图片地址
import BgSrc from '../assets/背景图.jpg' //二维码背景图片
const text = ref('9527') //文本
const code = ref(); //保存二维码图片链接
const test = (dataUrl, id) => {
  console.log(dataUrl, id)
  code.value = dataUrl
}
// 下载二维码
const upDown = () => {
  const link = document.createElement('a')
  link.download = 'qrcode.png'
  link.href = code.value;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

3、效果

更多属性用法可以去官网查看试试

vue-qr属性: