Press Next

# MatchGroupQrcodeScanPopup

Match group QR code scan popup component for displaying group QR codes for users to scan and join match groups.

# Import

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

# Code Demo

# Basic Usage

<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';

// Use mock data
const componentProps = getMockData();

// Event handlers
const onClose = () => {
  console.log('Close popup');
};

const onQrcodeClick = () => {
  console.log('QR code clicked');
};
</script>

# Custom Title and Hint

<template>
  <PressMatchGroupQrcodeScanPopup
    :show="true"
    title="Join Match Group"
    qrcode-url="https://example.com/qrcode.png"
    save-hint="Long press to save QR code image"
    @close="handleClose"
  />
</template>

# Custom Styles

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

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

# API

# Props

Attribute Description Type Default
show Whether to show popup boolean false
title PopupPlus title string 'Match Group'
qrcode-url QR code image URL string ''
save-hint Save hint text string 'Long press image to save'
custom-class Custom CSS class string ''
close-on-click-overlay Whether to close on overlay click boolean true
z-index PopupPlus z-index number 100

# Events

Event Description Parameters
close Triggered when popup is closed -
click-overlay Triggered when overlay is clicked -
qrcode-click Triggered when QR code is clicked -
qrcode-error Triggered when QR code fails to load -

# Theme Customization

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name Default Value Description
--pmgqsp-content-p-lr .4rem Content horizontal padding
--pmgqsp-content-p-tb .32rem Content vertical padding
--pmgqsp-spacing-xs .08rem Extra small spacing
--pmgqsp-spacing-sm .16rem Small spacing
--pmgqsp-spacing-md .24rem Medium spacing
--pmgqsp-spacing-lg .32rem Large spacing
--pmgqsp-spacing-xl .48rem Extra large spacing
--pmgqsp-popup-max-height 80vh PopupPlus max height
--pmgqsp-avatar-size 1.2rem Avatar size
--pmgqsp-qrcode-img-width 4.7rem QR code image width
--pmgqsp-qrcode-img-height 8.06rem QR code image height
--pmgqsp-bg-color #fff Background color
--pmgqsp-text-primary #000 Primary text color
--pmgqsp-text-secondary #666 Secondary text color
--pmgqsp-text-tertiary #999 Tertiary text color
--pmgqsp-border-color transparent Border color
--pmgqsp-group-info-bg #f8f9fa Group info background
--pmgqsp-title-font-size .32rem Title font size
--pmgqsp-title-font-weight 500 Title font weight
--pmgqsp-group-name-font-size .28rem Group name font size
--pmgqsp-group-desc-font-size .24rem Group description font size
--pmgqsp-update-time-font-size .24rem Update time font size
--pmgqsp-save-hint-font-size .28rem Save hint font size
--pmgqsp-radius-sm .04rem Small border radius
--pmgqsp-radius-md .08rem Medium border radius
--pmgqsp-radius-lg .16rem Large border radius
--pmgqsp-avatar-radius .12rem Avatar border radius

← MatchGroupingItem →