useQRCode

分类

@Integrations

导出大小

403 B

包

@vueuse/integrations

上次更改

8 个月前

qrcode 的封装。

演示

源代码演练场 (beta)

二维码的文本内容

可在 @vueuse/integrations 插件中使用。

安装

bash

npm i qrcode@^1

用法

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

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

或者传入一个 ref，返回的数据 URL ref 将随源 ref 的更改而改变。

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

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

html

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

类型声明

/**
 * Wrapper for qrcode.
 *
 * @see https://vueuse.org.cn/useQRCode
 * @param text
 * @param options
 */
export declare function useQRCode
(
  text
: MaybeRefOrGetter
<string>,
  options
?: QRCode.QRCodeToDataURLOptions
,
): ShallowRef
<string, string>