vue3+ts绘制二维码

界面展示

实现步骤

• 引入qrcode.vue

npm i qrcode.vue

• 界面引入并使用

<template>
    <div>
        <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>

• 属性说明

属性名	属性解释	类型	默认值
value	二维码的内容值	string	''
size	二维码大小	number	100
render-as	生成二维码的 HTML 标签，可选 `canvas` 或 `svg`。其中 `svg` 可以用于 SSR	string('canvas' | 'svg')	canvas
margin	定义空白区的宽度应该是多少	number	0
level	二维码的容错能力等级	string('L' | 'M' | 'Q' | 'H')	H
background	二维码背景颜色	string	#ffffff
foreground	二维码前景颜色	string	#000000
class	传递给二维码根元素的类名	string	''