MatchSharePopTips 分享弹窗提示

# MatchSharePopTips 分享弹窗提示

分享引导提示组件，用于引导用户点击小程序右上角的"..."按钮进行分享，适用于需要分享功能的场景。

# 引入

import PressMatchSharePopTips from 'press-next/press-match-share-pop-tips/press-match-share-pop-tips';

# 代码演示

# 基础用法

通过 v-model:visible 控制提示的显示与隐藏，点击遮罩区域自动关闭。

<template>
  <div>
    <!-- 触发按钮 -->
    <button @click="visible = true">显示分享提示</button>

    <!-- 分享提示组件 -->
    <PressMatchSharePopTips
      v-model:visible="visible"
      @close="handleClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchSharePopTips from 'press-next/press-match-share-pop-tips/press-match-share-pop-tips';

const visible = ref(false);

const handleClose = () => {
  console.log('用户关闭了提示');
};
</script>

# 自定义文案

可以通过 primary-text 和 secondary-text 自定义提示文字。

<template>
  <PressMatchSharePopTips
    v-model:visible="visible"
    primary-text="轻点右上角"
    secondary-text="把精彩分享给好友"
    @close="handleClose"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchSharePopTips from 'press-next/press-match-share-pop-tips/press-match-share-pop-tips';

const visible = ref(false);

const handleClose = () => {
  visible.value = false;
};
</script>

# 自定义样式

通过 custom-class 属性可以自定义组件样式。

<template>
  <PressMatchSharePopTips
    v-model:visible="visible"
    custom-class="custom-share-tips"
  />
</template>

<style>
.custom-share-tips {
  --pmspt-overlay-bg: rgba(0, 0, 0, .85);
  --pmspt-text-color: #fff;
  --pmspt-text-font-size: .36rem;
}
</style>

# API

# Props

参数	说明	类型	默认值
v-model:visible	是否显示提示	`boolean`	`false`
primary-text	主要提示文字（第一行）	`string`	`'点击右上角'`
secondary-text	次要提示文字（第二行）	`string`	`'分享比赛吧～'`
custom-class	自定义根节点类名	`string`	`''`

# Events

事件名	说明	回调参数
close	点击遮罩关闭时触发	-
update:visible	显示状态变化时触发	`(visible: boolean)`

# 主题定制

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

# 样式变量

名称	默认值	描述
--pmspt-overlay-bg	rgba(0, 0, 0, .75)	遮罩背景色
--pmspt-text-color	$color-text-invert-light	文字颜色
--pmspt-icon-color	$color-text-invert-light	图标颜色
--pmspt-text-font-size	$font-size-lg	文字字体大小
--pmspt-icon-size	.14rem	图标大小
--pmspt-icon-margin-left	.1rem	图标左边距
--pmspt-text-margin-bottom	.2rem	文字下边距
--pmspt-text-item-mb	.1rem	文字项间距
--pmspt-arrow-width	1.74rem	箭头宽度
--pmspt-arrow-height	3rem	箭头高度
--pmspt-arrow-margin-right	1.2rem	箭头右边距
--pmspt-arrow-bg	url(...)	箭头背景图
--pmspt-content-height	3rem	内容区域高度
--pmspt-z-index	1000	组件层级

← MatchShareInvite MatchSignActionPopup →