vue3+ts绘制二维码

npm i qrcode.vue

<template>
    <div>
        <el-row>二维码标签</el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="codeVal" placeholder="请输入二维码的值"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button @click="changeCode">
                    修改二维码的值
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <qrcode-vue :value="value" :size="120" :margin="2" :level="level" :render-as="renderAs" />
        </el-row>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'
  const value = ref('hello, nico')
  const codeVal = ref('')
  const level = ref<Level>('M')
  const renderAs = ref<RenderAs>('svg')

  const changeCode=()=>{
    value.value=codeVal.value
  }
</script>
<style lang='scss' scoped></style>