video-maker/frontend/src/views/main/QRCodeGenerator.vue

<script setup lang="ts">
import { ref } from "vue";
import { required } from "@/utils";
import QrcodeVue from "qrcode.vue";
let url = ref("");
let qrCode = ref("");
let size = ref("250");
let valid = ref(true);

function getQRCode() {
  qrCode.value = url.value;
}
</script>

<template>
  <v-container fluid>
    <v-card class="mt-10 ma-3 pa-sm-5">
      <v-card-title primary-title>
        <h3 class="card-title mb-3">QRCode Generator</h3>
      </v-card-title>
      <v-card-text class="mx-auto">
        <v-row>
          <v-col cols="6" class="d-flex flex-column">
            <v-form v-model="valid" ref="Form">
              <v-text-field
                v-model="url"
                :rules="required()"
                placeholder="請輸入網址"
              >
              </v-text-field>
              <v-btn @click="getQRCode()" variant="flat" color="primary">
                取得 QRCode
              </v-btn>
            </v-form>
          </v-col>

          <v-col cols="6">
            <div v-if="qrCode !== ''" class="d-flex justify-center">
              <qrcode-vue :value="qrCode" :size="size" level="H" />
            </div>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>