目录

qrcode.vue

快速开始

使用

全部代码

---

qrcode.vue

https://github.com/scopewu/qrcode.vue/blob/main/README-zh_cn.mdhttps://github.com/scopewu/qrcode.vue/blob/main/README-zh_cn.md

⚠️ 如果你正在使用 Vue 3，请升级 qrcode.vue 到 3.x;

🔒 如果你正在使用 Vue 2，请保持 qrcode.vue 的版本为 1.x;

一款 Vue.js 二维码组件.

快速开始

快速添加 qrcode.vue 组件到项目中

npm install --save qrcode.vue # yarn add qrcode.vue

dist/
|--- qrcode.vue.cjs.js         // CommonJS
|--- qrcode.vue.esm.js         // ES module
|--- qrcode.vue.browser.js     // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size

使用

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'createApp({data: {value: 'https://example.com',},template: '<qrcode-vue :value="value"></qrcode-vue>',components: {QrcodeVue,},
}).mount('#root')

或者，在独有单文件扩展 *.vue 中使用：

<template><qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>import QrcodeVue from 'qrcode.vue'export default {data() {return {value: 'https://example.com',size: 300,}},components: {QrcodeVue,},}
</script>

在 Vue 3 中配合 TypeScript 使用：

<template><qrcode-vue :value="value" :level="level" :render-as="renderAs" />
</template><script setup lang="ts">import { ref } from 'vue'import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'const value = ref<String>('qrcode')const level = ref<Level>('M')const renderAs = ref<RenderAs>('svg')
</script>## Component props### `value`- 类型：`string`
- 默认值：`''`二维码的内容值。### `size`- 类型：`number`
- 默认值：`100`二维码大小。### `render-as`- 类型：`string('canvas' | 'svg')`
- 默认值：`canvas`生成二维码的 HTML 标签，可选 `canvas` 或 `svg`。其中 `svg` 可以用于 SSR。### `margin`- 类型：`number`
- 默认值：`0`定义空白区的宽度应该是多少。### `level`- 类型：`string('L' | 'M' | 'Q' | 'H')`
- 默认值：`H`二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。了解更多，[维基百科：QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)。### `background`- 类型：`string`
- 默认值：`#ffffff`二维码背景颜色。### `foreground`- 类型：`string`
- 默认值：`#000000`二维码前景颜色。### `class`- 类型：`string`
- 默认值：`''`传递给二维码根元素的类名。## 软件许可copyright &copy; 2021 scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)

全部代码

<template><el-button text @click="dialogVisible = true">click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="30%":before-close="handleClose"><qrcode-vue :value="qrCode123" size:300  ></qrcode-vue><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></span></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import QrcodeVue from 'qrcode.vue'const dialogVisible = ref(false)
const qrCode123 = ref("我是二维码信息")const handleClose = (done: () => void) => {ElMessageBox.confirm('Are you sure to close this dialog?').then(() => {done()}).catch(() => {// catch error})
}
</script>
<style scoped>
.dialog-footer button:first-child {margin-right: 10px;
}
</style>