XQrCode 操作按钮

实现 基于 VueQrcode

示例

基础用法

<template>
  <div class="page">
    <XQrCode :size="100" :content="contentLoader" tip="请刷新"></XQrCode>

    <XQrCode
      :size="120"
      :content="contentLoader"
      :expired="2000"
      tip="请刷新"></XQrCode>

    <XQrCode
      :size="150"
      :content="contentLoader"
      :expired="5000"
      tip="请刷新一下"></XQrCode>
  </div>
</template>

<script setup lang="ts">
  import { XQrCode } from '@vtj/ui';

  const contentLoader: any = () => {
    return 'abc' + Date.now();
  };
</script>

<style scoped>
  .page {
    display: flex;
    gap: 30px;
  }
</style>

options 用法

<template>
  <div class="page">
    <XQrCode :size="100" :content="contentLoader" tip="请刷新"></XQrCode>

    <XQrCode
      :size="100"
      :content="contentLoader"
      tip="请刷新"
      :options="qrcodeOptions"></XQrCode>
  </div>
</template>

<script setup lang="ts">
  import { XQrCode } from '@vtj/ui';
  const contentLoader: any = () => {
    return 'abc' + Date.now();
  };

  const qrcodeOptions: any = {
    version: 2,
    errorCorrectionLevel: 'H',
    maskPattern: 7,
    margin: 2,
    scale: 2,
    type: 'image/jpeg',
    color: { dark: '#000000ff', light: '#ffffffff' },
    quality: 0.99
  };
</script>

<style scoped>
  .page {
    display: flex;
    gap: 30px;
  }
</style>

API

属性

属性名	说明	类型	默认值
size	二维码尺寸	number	-
content	二维码内容	string	-
expired	过期时间	number	-
tip	提示文本	string	-
options	qrcode 配置参数	object	-

options 属性配置

参数	type (range)	default value
version	number (1-40)	N/A
errorCorrectionLevel	String ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H')	'M'
maskPattern	number (0-7)	N/A
toSJISFunc	Function	N/A
margin	number	4
scale	number	4
width	number	N/A
color	{ dark: string; light:string }	{ dark: '#000000ff', light: '#ffffffff' }
type	string ('image/png', 'image/jpeg', 'image/webp')	'image/png'
quality	number(0-1)	0.92
value	string |Array<{ data: string; mode?: string }>	N/A

暴露

名称	说明	类型
refresh	刷新	-