Vue3二维码生成

目录

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-dialog
    v-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>