wms-antdvue/.svn/pristine/1d/1dcadefc87b78e9a32b6e4561bec360681301952.svn-base

<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="二维码组件">
        二维码组件使用示例，通常用于一些商品、促销活动、或者分享推广二维码展示
      </a-card>
    </div>
    <a-row class="mt-4" :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card :segmented="{ content: 'hard' }" :bordered="false" size="small" title="基础实例">
          <div align="center" class="qrcode-space">
            <QrCode :value="qrCodeUrl" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="渲染成img标签示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode :value="qrCodeUrl" tag="img" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="配置样式示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode
              :value="qrCodeUrl"
              :options="{
                color: { dark: '#55D187' },
              }"
            />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="本地logo示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode :value="qrCodeUrl" :logo="LogoImg" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="在线logo示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode
              :value="qrCodeUrl"
              :logo="LogoImg"
              :options="{
                color: { dark: '#55D187' },
              }"
            />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="LOGO配置示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode
              :value="qrCodeUrl"
              :logo="{
                src: LogoImg,
                logoSize: 0.2,
                borderSize: 0.05,
                borderRadius: 50,
                bgColor: 'blue',
              }"
            />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card :segmented="{ content: 'hard' }" :bordered="false" size="small" title="下载示例">
          <div align="center" class="qrcode-space">
            <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
          </div>
          <div align="center" class="qrcode-space">
            <a-button class="mt-4" type="primary" @click="download"> 下载 </a-button>
          </div>
          <div align="center" class="qrcode-space">
            <div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="扩展绘制示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode
              :value="qrCodeUrl"
              :width="200"
              :options="{ margin: 5 }"
              ref="qrDiyRef"
              :logo="LogoImg"
              @done="onQrcodeDone"
            />
          </div>
          <div align="center" class="qrcode-space">
            <a-button class="mt-4" type="primary" @click="downloadDiy"> 下载 </a-button>
          </div>
          <div align="center" class="qrcode-space">
            <div class="msg">要进行扩展绘制则不能将tag设为img</div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <a-card
          :segmented="{ content: 'hard' }"
          :bordered="false"
          size="small"
          title="配置大小示例"
        >
          <div align="center" class="qrcode-space">
            <QrCode :value="qrCodeUrl" :width="280" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { QrCode, QrCodeActionType } from '@/components/Qrcode/index';
  const qrCodeUrl = 'https://www.naiveadmin.com';
  const LogoImg = 'https://naive-ui-admin-docs.vercel.app/logo.png';

  const qrRef = ref<Nullable<QrCodeActionType>>(null);
  const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);

  function download() {
    const qrEl = unref(qrRef);
    if (!qrEl) return;
    qrEl.download('img');
  }

  function downloadDiy() {
    const qrEl = unref(qrDiyRef);
    if (!qrEl) return;
    qrEl.download('Qrcode');
  }

  function onQrcodeDone({ ctx }: any) {
    if (ctx instanceof CanvasRenderingContext2D) {
      // 额外绘制
      ctx.fillStyle = 'black';
      ctx.font = '16px "微软雅黑"';
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'center';
      ctx.fillText('扫描关注Star点一点', 100, 195, 200);
    }
  }
</script>

<style lang="less" scoped>
  .qrcode-space {
    position: relative;
    bottom: 0;
    transition: bottom 0.4s;
    &:hover {
      bottom: 6px;
    }
  }
</style>