使用二维码

¥useQRCode

qrcode 的封装。

¥Wrapper for qrcode.

示例

source

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 ref 将随着源 ref 的变化而变化。

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

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

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

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

类型声明

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

源代码

源代码 • 示例 • 文档

变更日志

No recent changes