Press Next

# MatchGroupQrcodeScanPopup 比赛群二维码扫描弹窗

比赛群二维码扫描弹窗组件，用于展示群二维码供用户扫描加入比赛群。

# 引入

import PressMatchGroupQrcodeScanPopup from 'press-next/press-match-group-q-rcode-scan-popup/press-match-group-q-rcode-scan-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchGroupQrcodeScanPopup
    :show="componentProps.show"
    :title="componentProps.title"
    :qrcode-url="componentProps.qrcodeUrl"
    :save-hint="componentProps.saveHint"
    @close="onClose"
    @qrcode-click="onQrcodeClick"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchGroupQrcodeScanPopup from 'press-next/press-match-group-q-rcode-scan-popup/press-match-group-q-rcode-scan-popup.vue';
import { getMockData } from './demo-data';

// 使用模拟数据
const componentProps = getMockData();

// 事件处理
const onClose = () => {
  console.log('关闭弹窗');
};

const onQrcodeClick = () => {
  console.log('点击二维码');
};
</script>

# 自定义标题和提示

<template>
  <PressMatchGroupQrcodeScanPopup
    :show="true"
    title="加入比赛群"
    qrcode-url="https://example.com/qrcode.png"
    save-hint="长按保存二维码图片"
    @close="handleClose"
  />
</template>

# 自定义样式

<template>
  <PressMatchGroupQrcodeScanPopup
    :show="true"
    custom-class="custom-qrcode-popup"
    title="比赛群"
    :qrcode-url="qrcodeUrl"
    @close="onClose"
  />
</template>

<style>
.custom-qrcode-popup {
  --pmgqsp-bg-color: #f5f5f5;
  --pmgqsp-title-font-size: 0.36rem;
}
</style>

# API

# Props

参数 说明 类型 默认值
show 是否显示弹窗 boolean false
title 弹窗标题 string '比赛群'
qrcode-url 二维码图片地址 string ''
save-hint 保存提示文字 string '长按图片或截图保存'
custom-class 自定义样式类 string ''
close-on-click-overlay 点击遮罩是否关闭 boolean true
z-index 弹窗层级 number 100

# Events

事件名 说明 参数
close 关闭弹窗时触发 -
click-overlay 点击遮罩层时触发 -
qrcode-click 点击二维码时触发 -
qrcode-error 二维码加载失败时触发 -

# 主题定制

# 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
--pmgqsp-content-p-lr .4rem 内容左右间距
--pmgqsp-content-p-tb .32rem 内容上下间距
--pmgqsp-spacing-xs .08rem 超小间距
--pmgqsp-spacing-sm .16rem 小间距
--pmgqsp-spacing-md .24rem 中等间距
--pmgqsp-spacing-lg .32rem 大间距
--pmgqsp-spacing-xl .48rem 超大间距
--pmgqsp-popup-max-height 80vh 弹窗最大高度
--pmgqsp-avatar-size 1.2rem 头像尺寸
--pmgqsp-qrcode-img-width 4.7rem 二维码图片宽度
--pmgqsp-qrcode-img-height 8.06rem 二维码图片高度
--pmgqsp-bg-color #fff 背景色
--pmgqsp-text-primary #000 主要文字色
--pmgqsp-text-secondary #666 次要文字色
--pmgqsp-text-tertiary #999 三级文字色
--pmgqsp-border-color transparent 边框色
--pmgqsp-group-info-bg #f8f9fa 群信息背景色
--pmgqsp-title-font-size .32rem 标题字体大小
--pmgqsp-title-font-weight 500 标题字体粗细
--pmgqsp-group-name-font-size .28rem 群名字体大小
--pmgqsp-group-desc-font-size .24rem 群描述字体大小
--pmgqsp-update-time-font-size .24rem 更新时间字体大小
--pmgqsp-save-hint-font-size .28rem 保存提示字体大小
--pmgqsp-radius-sm .04rem 小圆角
--pmgqsp-radius-md .08rem 中等圆角
--pmgqsp-radius-lg .16rem 大圆角
--pmgqsp-avatar-radius .12rem 头像圆角

← MatchGroupingItem →