useQRCode

类别

@集成

导出大小

305 B

包

@vueuse/integrations

最近修改

2 days ago

qrcode 的封装器。

🌐 Wrapper for qrcode.

示例

源代码在线运行

Text content for QRCode

Available in the @vueuse/integrations add-on.

安装

🌐 Install

npm i qrcode@^1

用法

🌐 Usage

import { useQRCode } from '@vueuse/integrations/useQRCode'

// `qrcode` will be a ref of data URL
const qrcode = useQRCode('text-to-encode')

或者传递一个 ref 给它，返回的数据 URL 引用会随着源引用的变化而改变。

🌐 or passing a ref to it, the returned data URL ref will change along with the source ref's changes.

import { useQRCode } from '@vueuse/integrations/useQRCode'
import { shallowRef } from 'vue'

const text = shallowRef('text-to-encode')
const qrcode = useQRCode(text)

<input v-model="text" type="text" />
<img :src="qrcode" alt="QR Code" />