useQRCode

カテゴリ

@Integrations

エクスポートサイズ

371 B

パッケージ

@vueuse/integrations

最終更新日

先週

qrcode のラッパーです。

デモ

ソース

QRCode のテキストコンテンツ

@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 { ref } from 'vue'

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

html

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

型定義

typescript

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