useQRCode

类别

@Integrations

导出体积

371 B

依赖包

@vueuse/integrations

上次更改

3 minutes ago

qrcode 的封装。

示例

源码

Text content for QRCode

Available in the @vueuse/integrations add-on.

安装

npm i qrcode@^1

使用方法

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

// `qrcode` 将是一个数据 URL 的 ref
const qrcode = useQRCode('要编码的文本')

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

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

const text = ref('要编码的文本')
const qrcode = useQRCode(text)

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

类型声明

/**
 * 响应式 qrcode 包装器
 *
 * @see https://vueuse.org/useQRCode
 * @param text
 * @param options
 */
export declare function useQRCode(
  text: MaybeRefOrGetter<string>,
  options?: QRCode.QRCodeToDataURLOptions,
): Ref<string, string>

源码

源码 • 演示 • 文档

贡献者

Anthony Fu

一纸忘忧

Anthony Fu

Doctorwu

Curt Grimes

Okuto Oyama

Alex Kozack

Antério Vieira

更新日志

v10.0.0-beta.4 on 4/13/2023

4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

10e98 - feat(toRef)!: rename resolveRef to toRef