useQRCode

类别

@Integrations

导出大小

401 B

包

@vueuse/integrations

演示

源码

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 { 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" />

类型声明

typescript

/**
 * 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>