Vue3 生成二维码：简单实现输入框内容转二维码

以下是一个使用 Vue3 框架实现该需求的代码示例：

HTML 代码：

<template>
  <div>
    <label for='input'>请输入内容：</label>
    <input id='input' type='text' v-model='content' />
    <button @click='generateQRCode'>生成二维码</button>
    <div v-if='qrCodeDataUrl'>
      <img :src='qrCodeDataUrl' />
    </div>
  </div>
</template>

Vue3 代码：

<script>
import { ref } from 'vue'
import QRCode from 'qrcode'

export default {
  name: 'QRCodeGenerator',
  setup() {
    const content = ref('')
    const qrCodeDataUrl = ref('')
    const generateQRCode = async () => {
      qrCodeDataUrl.value = await QRCode.toDataURL(content.value)
    }
    return { content, qrCodeDataUrl, generateQRCode }
  },
}
</script>

在上述代码中，先引入了一个第三方库 qrcode，用于生成二维码。在 setup 函数中，定义了一个 content 变量，用于存放输入框的内容，并定义了一个 qrCodeDataUrl 变量，用于存放生成的二维码的 DataURL。同时，定义了一个 generateQRCode 函数，当点击按钮时，调用该函数来生成二维码。具体实现是调用 QRCode.toDataURL 函数，将输入框的内容作为参数，生成二维码的 DataURL，并将其赋值给 qrCodeDataUrl 变量。在 HTML 代码中，使用 v-if 指令来判断是否需要显示二维码图片，当 qrCodeDataUrl 有值时，就显示生成的二维码图片。