MatchShareInvite 分享邀请弹窗

# MatchShareInvite 分享邀请弹窗

分享邀请弹窗组件，用于展示赛事分享邀请信息，包含赛事详情、奖励展示和操作按钮。

# 引入

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

# 代码演示

# 基础用法

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

# 自定义背景图片

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

# 使用插槽自定义内容

<PressMatchShareInvite :show="show">
  <template #invite-text>
    <div class="custom-invite">自定义邀请文本</div>
  </template>
  
  <template #banner-bg>
    <div class="custom-banner">自定义横幅背景</div>
  </template>
  
  <template #reward-box-bg="{ reward, index }">
    <div class="custom-reward-box" :data-index="index">
      {{ reward.name }} 的自定义背景
    </div>
  </template>
  
  <template #qr-title>
    <img src="custom-qr-title.png" alt="自定义二维码标题">
  </template>
  
  <template #footer>
    <div class="custom-actions">
      <button @click="customAction1">自定义按钮1</button>
      <button @click="customAction2">自定义按钮2</button>
    </div>
  </template>
</PressMatchShareInvite>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`1000`
inviter-name	邀请人名称	string	`'大白兔爱吃肉'`
match-title	赛事标题	string	`'三角洲行动赛'`
match-time	赛事时间	string	`'2022年11月30日12:30'`
match-type	赛事类型	string	`'线上参赛'`
registration-method	报名方式	string	`'个人和团队均可报名，线上参赛'`
rewards	奖励列表	RewardItem[]	`[]`
qr-code-value	二维码内容	string	`'https://tencent.com'`
mask-closable	点击蒙层是否关闭	boolean	`true`
cover-bg	蒙层背景	string	`''`
decorative-img	装饰背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/decorative-bg.png'`
scan-title-img	扫描标题图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/scan-title.png'`
banner-bg-img	卡片背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/banner-bg.png'`
shadow-bg-img	类型标签阴影背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/shadow-bg.png'`
small-bg-img	小奖励背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/small-bg.png'`
large-bg-img	大奖励背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/reward-bg.png'`
box-bg-img	奖励盒子背景图片	string	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/match-share-invite/box-bg.png'`

# RewardItem 数据结构

键名	说明	类型
icon	奖励图标	string
name	奖励名称	string
count	奖励数量	string \| number

# Slots

插槽名	说明	参数
invite-text	邀请文本内容	-
banner-bg	赛事海报背景	-
type-bg	赛事类型背景	-
reward-bg	奖励区域背景	-
reward-box-bg	奖励盒子背景	`{ reward: RewardItem, index: number }`
qr-title	二维码标题	-
footer	底部操作区域	-

# Events

事件名	说明	回调参数
close	关闭弹窗时触发	-
copy-link	点击复制链接时触发	-
save-image	点击保存图片时触发	-

# 样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

# 定位属性

名称	默认值	描述
--msi-container-position	relative	容器定位方式
--msi-content-position	relative	内容定位方式
--msi-decorative-content-position	absolute	装饰内容定位方式
--msi-card-position	relative	卡片定位方式
--msi-card-bg-position	absolute	卡片背景定位方式
--msi-card-image-position	absolute	卡片图片定位方式
--msi-type-tag-position	relative	类型标签定位方式
--msi-type-image-position	absolute	类型图片定位方式
--msi-rewards-position	relative	奖励区域定位方式
--msi-large-bg-position	absolute	大背景定位方式
--msi-small-bg-position	absolute	小背景定位方式
--msi-reward-box-position	relative	奖励盒子定位方式
--msi-box-bg-position	absolute	盒子背景定位方式
--msi-reward-icon-position	absolute	奖励图标定位方式

# 盒模型属性

名称	默认值	描述
--msi-container-width	7.5rem	容器宽度
--msi-container-padding	0	容器内边距
--msi-decorative-content-width	7.3rem	装饰内容宽度
--msi-decorative-content-height	9.33rem	装饰内容高度
--msi-decorative-content-top	$spacing-lg	装饰内容顶部距离
--msi-decorative-content-left	$spacing-sm	装饰内容左侧距离
--msi-decorative-content-z-index	-2	装饰内容层级
--msi-decorative-img-width	7.3rem	装饰图片宽度
--msi-decorative-img-height	9.33rem	装饰图片高度
--msi-card-width	6.44rem	卡片宽度
--msi-card-height	9.44rem	卡片高度
--msi-card-margin	0 auto	卡片边距
--msi-card-image-z-index	-1	卡片图片层级
--msi-screenshot-width	6.44rem	截图宽度
--msi-screenshot-height	9.44rem	截图高度
--msi-screenshot-margin	0 auto	截图边距
--msi-title-margin-top	1.08rem	标题上边距
--msi-type-info-width	100%	类型信息宽度
--msi-type-info-margin	.76rem auto 0	类型信息边距
--msi-type-tag-min-width	1.66rem	类型标签最小宽度
--msi-type-tag-height	$spacing-xl	类型标签高度
--msi-type-tag-padding	0 $spacing-xxl	类型标签内边距
--msi-type-image-width	100%	类型图片宽度
--msi-type-image-height	$spacing-xl	类型图片高度
--msi-rewards-width	5.76rem	奖励区域宽度
--msi-rewards-height	2.32rem	奖励区域高度
--msi-rewards-margin	3.02rem auto 0	奖励区域边距
--msi-small-bg-width	3.38rem	小背景宽度
--msi-large-bg-margin	0 auto	大背景边距
--msi-small-bg-margin	0 auto	小背景边距
--msi-rewards-list-max-width	5.12rem	奖励列表最大宽度
--msi-rewards-list-padding-top	.68rem	奖励列表顶部内边距
--msi-rewards-list-gap	$spacing-sm	奖励列表间距
--msi-reward-item-width	1.1rem	奖励项宽度
--msi-reward-item-height	1.44rem	奖励项高度
--msi-reward-box-width	1.12rem	奖励盒子宽度
--msi-reward-box-height	1.12rem	奖励盒子高度
--msi-reward-icon-width	.73rem	奖励图标宽度
--msi-reward-icon-height	.73rem	奖励图标高度
--msi-reward-icon-z-index	1	奖励图标层级
--msi-reward-name-width	1.1rem	奖励名称宽度
--msi-avatar-image-width	100%	头像图片宽度
--msi-avatar-image-height	100%	头像图片高度
--msi-box-bg-z-index	0	盒子背景层级
--msi-bottom-width	5.76rem	底部区域宽度
--msi-bottom-margin	$spacing-sm auto 0	底部区域边距
--msi-qr-gap	$spacing-xl	二维码间距
--msi-qr-box-width	1.1rem	二维码盒子宽度
--msi-qr-box-height	1.1rem	二维码盒子高度
--msi-qr-box-padding	.04rem	二维码盒子内边距
--msi-qr-code-width	1rem	二维码宽度
--msi-qr-code-height	1rem	二维码高度
--msi-qr-code-padding	.04rem	二维码内边距
--msi-qr-code-z-index	1	二维码层级
--msi-qr-detail-max-width	4rem	二维码详情最大宽度
--msi-qr-detail-height	1.1rem	二维码详情高度
--msi-qr-title-width	1.38rem	二维码标题宽度
--msi-qr-title-height	.36rem	二维码标题高度
--msi-qr-text-max-width	4rem	二维码文本最大宽度
--msi-actions-width	6.14rem	操作区域宽度
--msi-actions-margin	1.68rem auto 0	操作区域边距
--msi-actions-gap	$spacing-sm	操作按钮间距
--msi-actions-btn-width	3.2rem	操作按钮宽度
--msi-actions-btn-height	.8rem	操作按钮高度
--msi-brand-gap	$spacing-md	品牌间距
--msi-rewards-title-margin	$spacing-sm 0 $spacing-md $spacing-lg	奖励标题边距

# 边框属性

名称	默认值	描述
--msi-container-radius	0	容器圆角
--msi-card-radius	0	卡片圆角
--msi-screenshot-radius	0	截图圆角
--msi-qr-box-border	.01rem solid rgba(61, 90, 107, .6)	二维码盒子边框
--msi-qr-code-border	.01rem solid rgba(61, 90, 107, .6)	二维码边框
--msi-actions-btn-border	0	操作按钮边框
--msi-actions-btn-radius	0	操作按钮圆角
--msi-actions-btn-secondary-border	.02rem solid #366ff4	次要按钮边框
--msi-actions-btn-secondary-radius	$border-radius-999	次要按钮圆角
--msi-actions-btn-primary-border	0.02rem solid #366ff4	主要按钮边框
--msi-actions-btn-primary-radius	$border-radius-999	主要按钮圆角

# 背景属性

名称	默认值	描述
--msi-popup-content-bg	transparent	弹窗内容背景
--msi-container-bg	transparent	容器背景
--msi-card-bg-repeat	no-repeat	卡片背景重复方式
--msi-card-bg-size	auto 100%	卡片背景尺寸
--msi-card-box-shadow	$spacing-xs $spacing-xs $spacing-sm rgba(0, 0, 0, 0.3)	卡片阴影
--msi-screenshot-box-shadow	$spacing-xs $spacing-xs $spacing-sm rgba(0, 0, 0, 0.3)	截图阴影
--msi-type-tag-bg-size	100% 100%	类型标签背景尺寸
--msi-rewards-bg-size	100% 100%	奖励背景尺寸
--msi-reward-box-bg-size	100% 100%	奖励盒子背景尺寸
--msi-qr-code-bg	#fff	二维码背景
--msi-qr-title-bg-image	''	二维码标题背景图片
--msi-actions-btn-bg-size	100% 100%	操作按钮背景尺寸
--msi-actions-btn-bg-repeat	no-repeat	操作按钮背景重复方式
--msi-actions-btn-secondary-bg	transparent	次要按钮背景
--msi-actions-btn-primary-bg	#366ff4	主要按钮背景

# 文本属性

名称	默认值	描述
--msi-title-color	$color-text-invert-light	标题颜色
--msi-title-font-size	$font-size-md	标题字体大小
--msi-title-font-weight	$font-weight-bold	标题字体粗细
--msi-title-text-align	center	标题文本对齐
--msi-title-text-shadow	0 .02rem .02rem rgba(30, 44, 56, .52)	标题文本阴影
--msi-title-white-space	nowrap	标题空白处理
--msi-type-tag-color	$color-text-invert-light	类型标签颜色
--msi-type-tag-font-size	$font-size-xs	类型标签字体大小
--msi-type-tag-font-weight	$font-weight-regular	类型标签字体粗细
--msi-type-tag-line-height	$spacing-xl	类型标签行高
--msi-rewards-title-color	$color-text-invert-light	奖励标题颜色
--msi-rewards-title-font-size	$font-size-sm	奖励标题字体大小
--msi-rewards-title-font-weight	$font-weight-bold	奖励标题字体粗细
--msi-reward-name-color	$color-text-invert-default	奖励名称颜色
--msi-reward-name-font-size	$font-size-xs	奖励名称字体大小
--msi-reward-name-line-height	.3rem	奖励名称行高
--msi-reward-name-text-align	center	奖励名称文本对齐
--msi-reward-name-white-space	nowrap	奖励名称空白处理
--msi-reward-name-text-overflow	ellipsis	奖励名称文本溢出
--msi-qr-text-color	$color-text-invert-light	二维码文本颜色
--msi-qr-text-font-size	$font-size-xs	二维码文本字体大小
--msi-qr-text-font-weight	$font-weight-regular	二维码文本字体粗细
--msi-qr-text-white-space	nowrap	二维码文本空白处理
--msi-qr-text-text-overflow	ellipsis	二维码文本溢出
--msi-actions-btn-font-size	$font-size-lg	操作按钮字体大小
--msi-actions-btn-font-weight	$font-weight-regular	操作按钮字体粗细
--msi-actions-btn-secondary-color	$color-text-invert-light	次要按钮文字颜色
--msi-actions-btn-primary-color	$color-text-invert-light	主要按钮文字颜色

# 其他属性

名称	默认值	描述
--msi-container-overflow	visible	容器溢出处理
--msi-card-overflow	hidden	卡片溢出处理
--msi-card-bg-top	0	卡片背景顶部位置
--msi-card-bg-right	0	卡片背景右侧位置
--msi-card-bg-bottom	0	卡片背景底部位置
--msi-card-bg-left	0	卡片背景左侧位置
--msi-avatar-image-transform	rotate(180deg)	头像图片变换
--msi-avatar-image-object-fit	cover	头像图片适应方式
--msi-screenshot-object-fit	cover	截图适应方式
--msi-reward-box-object-fit	contain	奖励盒子适应方式
--msi-reward-name-overflow	hidden	奖励名称溢出处理
--msi-rewards-list-overflow	hidden	奖励列表溢出处理
--msi-qr-text-overflow	hidden	二维码文本溢出处理
--msi-title-transform	translateY(0)	标题变换
--msi-type-text-transform	translateY(0)	类型文本变换
--msi-type-text-white-space	nowrap	类型文本空白处理
--msi-actions-btn-transition	all .3s ease	按钮过渡效果
--msi-actions-btn-cursor	pointer	按钮鼠标样式
--msi-actions-btn-hover-opacity	.8	按钮悬停透明度

← MatchSetAwardPopup MatchSharePopTips →