MoreHook

Appearance

Return to top
On this page

useQRCode

根据字符串生成二维码

借助于 EasyARCodeJS 实现，具体api可参照其文档

Demo

source

二维码:

Usage

html
<template>
  <div>
    <div>二维码:</div>
    <img :src="state" alt="" />
    <button @click="change">更改二维码内容</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useQRCode } from '@morehook/core'

const text = ref<string>('https://www.baidu.com/')

const state = useQRCode(text, {
  // logo: img.default, 可放置图片
  colorDark: '#000000'
})

function change() {
  text.value = String(Math.random())
}
</script>

Type Declarations

typescript
type Text = Ref<string> | string
/**
 * onRenderingStart: 开始渲染钩子
 * onRenderingEnd: 渲染结束钩子
 */
interface useQRCodeOptions {
  onRenderingStart?: (qrCodeOptions: any) => void
  onRenderingEnd?: (qrCodeOptions: any, dataURL: string) => void
  [key: string]: any
}
/**
 * 根据字符串生成二维码
 * @param text 二维码字符串内容
 * @param options useQRCodeOptions
 * @returns base64 格式的二维码内容
 */
export declare function useQRCode(
  text: Text,
  options?: useQRCodeOptions
): Ref<string | undefined>

Source

Source • Demo • Docs