Press Next

# MatchShareInvite

Share invite popup component for displaying match sharing invitation information, including match details, rewards display and action buttons.

# Import

import PressMatchShareInvite from 'press-next/press-match-share-invite/press-match-share-invite';

# Usage

# Basic Usage

<PressMatchShareInvite
  :show="show"
  :inviter-name="inviterName"
  :match-title="matchTitle"
  :match-time="matchTime"
  :match-type="matchType"
  :rewards="rewards"
  :qr-code-value="qrCodeValue"
  @close="onClose"
  @copy-link="onCopyLink"
  @save-image="onSaveImage"
/>

# Custom Background Images

<PressMatchShareInvite
  :show="show"
  :banner-bg-img="customBannerImg"
  :shadow-bg-img="customShadowImg"
  :large-bg-img="customLargeBgImg"
  :small-bg-img="customSmallBgImg"
  :box-bg-img="customBoxBgImg"
/>

# Using Slots for Custom Content

<PressMatchShareInvite :show="show">
  <template #invite-text>
    <div class="custom-invite">Custom invite text</div>
  </template>
  
  <template #banner-bg>
    <div class="custom-banner">Custom banner background</div>
  </template>
  
  <template #reward-box-bg="{ reward, index }">
    <div class="custom-reward-box" :data-index="index">
      Custom background for {{ reward.name }}
    </div>
  </template>
  
  <template #qr-title>
    <img src="custom-qr-title.png" alt="Custom QR title">
  </template>
  
  <template #footer>
    <div class="custom-actions">
      <button @click="customAction1">Custom Button 1</button>
      <button @click="customAction2">Custom Button 2</button>
    </div>
  </template>
</PressMatchShareInvite>

# API

# Props

Attribute Description Type Default
show Whether to show popup boolean false
z-index PopupPlus z-index number 1000
inviter-name Inviter name string '大白兔爱吃肉'
match-title Match title string '三角洲行动赛'
match-time Match time string '2022年11月30日12:30'
match-type Match type string '线上参赛'
rewards Reward list RewardItem[] []
qr-code-value QR code content string 'https://tencent.com'
mask-closable Whether to close when clicking mask boolean true
cover-bg Mask background string ''
decorative-img Decorative background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/decorative-bg.png'
scan-title-img Scan title image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/scan-title.png'
banner-bg-img Card background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/banner-bg.png'
shadow-bg-img Type tag shadow background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/shadow-bg.png'
small-bg-img Small reward background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/small-bg.png'
large-bg-img Large reward background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/reward-bg.png'
box-bg-img Reward box background image string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/box-bg.png'

# RewardItem Data Structure

Key Description Type
icon Reward icon string
name Reward name string
count Reward count string | number

# Slots

Slot Name Description Parameters
invite-text Invite text content -
banner-bg Match banner background -
type-bg Match type background -
reward-bg Reward area background -
reward-box-bg Reward box background { reward: RewardItem, index: number }
qr-title QR code title -
footer Footer action area -

# Events

Event Description Arguments
close Emitted when popup is closed -
copy-link Emitted when copy link button is clicked -
save-image Emitted when save image button is clicked -

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

# Positioning Properties

Name Default Value Description
--msi-container-position relative Container position
--msi-content-position relative Content position
--msi-decorative-content-position absolute Decorative content position
--msi-card-position relative Card position
--msi-card-bg-position absolute Card background position
--msi-card-image-position absolute Card image position
--msi-type-tag-position relative Type tag position
--msi-type-image-position absolute Type image position
--msi-rewards-position relative Rewards area position
--msi-large-bg-position absolute Large background position
--msi-small-bg-position absolute Small background position
--msi-reward-box-position relative Reward box position
--msi-box-bg-position absolute Box background position
--msi-reward-icon-position absolute Reward icon position

# Box Model Properties

Name Default Value Description
--msi-container-width 7.5rem Container width
--msi-container-padding 0 Container padding
--msi-decorative-content-width 7.3rem Decorative content width
--msi-decorative-content-height 9.33rem Decorative content height
--msi-decorative-content-top $spacing-lg Decorative content top distance
--msi-decorative-content-left $spacing-sm Decorative content left distance
--msi-decorative-content-z-index -2 Decorative content z-index
--msi-decorative-img-width 7.3rem Decorative image width
--msi-decorative-img-height 9.33rem Decorative image height
--msi-card-width 6.44rem Card width
--msi-card-height 9.44rem Card height
--msi-card-margin 0 auto Card margin
--msi-card-image-z-index -1 Card image z-index
--msi-screenshot-width 6.44rem Screenshot width
--msi-screenshot-height 9.44rem Screenshot height
--msi-screenshot-margin 0 auto Screenshot margin
--msi-title-margin-top 1.08rem Title top margin
--msi-type-info-width 100% Type info width
--msi-type-info-margin .76rem auto 0 Type info margin
--msi-type-tag-min-width 1.66rem Type tag minimum width
--msi-type-tag-height $spacing-xl Type tag height
--msi-type-tag-padding 0 $spacing-xxl Type tag padding
--msi-type-image-width 100% Type image width
--msi-type-image-height $spacing-xl Type image height
--msi-rewards-width 5.76rem Rewards area width
--msi-rewards-height 2.32rem Rewards area height
--msi-rewards-margin 3.02rem auto 0 Rewards area margin
--msi-small-bg-width 3.38rem Small background width
--msi-large-bg-margin 0 auto Large background margin
--msi-small-bg-margin 0 auto Small background margin
--msi-rewards-list-max-width 5.12rem Rewards list max width
--msi-rewards-list-padding-top .68rem Rewards list top padding
--msi-rewards-list-gap $spacing-sm Rewards list gap
--msi-reward-item-width 1.1rem Reward item width
--msi-reward-item-height 1.44rem Reward item height
--msi-reward-box-width 1.12rem Reward box width
--msi-reward-box-height 1.12rem Reward box height
--msi-reward-icon-width .73rem Reward icon width
--msi-reward-icon-height .73rem Reward icon height
--msi-reward-icon-z-index 1 Reward icon z-index
--msi-reward-name-width 1.1rem Reward name width
--msi-avatar-image-width 100% Avatar image width
--msi-avatar-image-height 100% Avatar image height
--msi-box-bg-z-index 0 Box background z-index
--msi-bottom-width 5.76rem Bottom area width
--msi-bottom-margin $spacing-sm auto 0 Bottom area margin
--msi-qr-gap $spacing-xl QR code gap
--msi-qr-box-width 1.1rem QR box width
--msi-qr-box-height 1.1rem QR box height
--msi-qr-box-padding .04rem QR box padding
--msi-qr-code-width 1rem QR code width
--msi-qr-code-height 1rem QR code height
--msi-qr-code-padding .04rem QR code padding
--msi-qr-detail-max-width 4rem QR detail max width
--msi-qr-detail-height 1.1rem QR detail height
--msi-qr-title-width 1.38rem QR title width
--msi-qr-title-height .36rem QR title height
--msi-qr-text-max-width 4rem QR text max width
--msi-actions-width 6.14rem Actions area width
--msi-actions-margin 1.68rem auto 0 Actions area margin
--msi-actions-gap $spacing-sm Action buttons gap
--msi-actions-btn-width 3.2rem Action button width
--msi-actions-btn-height .8rem Action button height
--msi-brand-gap $spacing-md Brand gap
--msi-rewards-title-margin $spacing-sm 0 $spacing-md $spacing-lg Rewards title margin

# Border Properties

Name Default Value Description
--msi-container-radius 0 Container border radius
--msi-card-radius 0 Card border radius
--msi-screenshot-radius 0 Screenshot border radius
--msi-qr-box-border .01rem solid rgba(61, 90, 107, .6) QR box border
--msi-qr-code-border .01rem solid rgba(61, 90, 107, .6) QR code border
--msi-actions-btn-border 0 Action button border
--msi-actions-btn-radius 0 Action button border radius
--msi-actions-btn-secondary-border .02rem solid #366ff4 Secondary button border
--msi-actions-btn-secondary-radius $border-radius-999 Secondary button border radius
--msi-actions-btn-primary-border .02rem solid #366ff4 Primary button border
--msi-actions-btn-primary-radius $border-radius-999 Primary button border radius

# Background Properties

Name Default Value Description
--msi-popup-content-bg transparent PopupPlus content background
--msi-container-bg transparent Container background
--msi-card-bg-repeat no-repeat Card background repeat
--msi-card-bg-size auto 100% Card background size
--msi-card-box-shadow $spacing-xs $spacing-xs $spacing-sm rgba(0, 0, 0, 0.3) Card box shadow
--msi-screenshot-box-shadow $spacing-xs $spacing-xs $spacing-sm rgba(0, 0, 0, 0.3) Screenshot box shadow
--msi-type-tag-bg-size 100% 100% Type tag background size
--msi-rewards-bg-size 100% 100% Rewards background size
--msi-reward-box-bg-size 100% 100% Reward box background size
--msi-qr-code-bg #fff QR code background
--msi-qr-title-bg-image '' QR title background image
--msi-actions-btn-bg-size 100% 100% Action button background size
--msi-actions-btn-bg-repeat no-repeat Action button background repeat
--msi-actions-btn-secondary-bg transparent Secondary button background
--msi-actions-btn-primary-bg #366ff4 Primary button background

# Text Properties

Name Default Value Description
--msi-title-color $color-text-invert-light Title color
--msi-title-font-size $font-size-md Title font size
--msi-title-font-weight $font-weight-bold Title font weight
--msi-title-text-align center Title text alignment
--msi-title-text-shadow 0 .02rem .02rem rgba(30, 44, 56, .52) Title text shadow
--msi-title-white-space nowrap Title white space
--msi-type-tag-color $color-text-invert-light Type tag color
--msi-type-tag-font-size $font-size-xs Type tag font size
--msi-type-tag-font-weight $font-weight-regular Type tag font weight
--msi-type-tag-line-height $spacing-xl Type tag line height
--msi-rewards-title-color $color-text-invert-light Rewards title color
--msi-rewards-title-font-size $font-size-sm Rewards title font size
--msi-rewards-title-font-weight $font-weight-bold Rewards title font weight
--msi-reward-name-color $color-text-invert-default Reward name color
--msi-reward-name-font-size $font-size-xs Reward name font size
--msi-reward-name-line-height .3rem Reward name line height
--msi-reward-name-text-align center Reward name text alignment
--msi-reward-name-white-space nowrap Reward name white space
--msi-reward-name-text-overflow ellipsis Reward name text overflow
--msi-qr-text-color $color-text-invert-light QR text color
--msi-qr-text-font-size $font-size-xs QR text font size
--msi-qr-text-font-weight $font-weight-regular QR text font weight
--msi-qr-text-white-space nowrap QR text white space
--msi-qr-text-text-overflow ellipsis QR text overflow
--msi-actions-btn-font-size $font-size-lg Action button font size
--msi-actions-btn-font-weight $font-weight-regular Action button font weight
--msi-actions-btn-secondary-color $color-text-invert-light Secondary button text color
--msi-actions-btn-primary-color $color-text-invert-light Primary button text color

# Other Properties

Name Default Value Description
--msi-container-overflow visible Container overflow
--msi-card-overflow hidden Card overflow
--msi-card-bg-top 0 Card background top position
--msi-card-bg-right 0 Card background right position
--msi-card-bg-bottom 0 Card background bottom position
--msi-card-bg-left 0 Card background left position
--msi-avatar-image-transform rotate(180deg) Avatar image transform
--msi-avatar-image-object-fit cover Avatar image object fit
--msi-screenshot-object-fit cover Screenshot object fit
--msi-reward-box-object-fit contain Reward box object fit
--msi-reward-name-overflow hidden Reward name overflow
--msi-rewards-list-overflow hidden Rewards list overflow
--msi-qr-text-overflow hidden QR text overflow
--msi-title-transform translateY(0) Title transform
--msi-type-text-transform translateY(0) Type text transform
--msi-type-text-white-space nowrap Type text white space
--msi-qr-code-z-index 1 QR code z-index
--msi-actions-btn-transition all .3s ease Button transition
--msi-actions-btn-cursor pointer Button cursor
--msi-actions-btn-hover-opacity .8 Button hover opacity

← MatchSharePopTips →