Press Next

# MatchSharePopTips Share Pop Tips

A share guidance tip component that guides users to click the "..." button in the upper right corner of the Mini Program to share. Suitable for scenarios that require sharing functionality.

# Import

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

# Code Demo

# Basic Usage

Control the display and hiding of tips through v-model:visible, and automatically close when clicking the mask area.

<template>
  <div>
    <!-- Trigger button -->
    <button @click="visible = true">Show Share Tips</button>

    <!-- Share tips component -->
    <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('User closed the tips');
};
</script>

# Custom Text

You can customize the tip text through primary-text and secondary-text.

<template>
  <PressMatchSharePopTips
    v-model:visible="visible"
    primary-text="Tap top right corner"
    secondary-text="Share with friends"
    @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 Style

You can customize component styles through the custom-class attribute.

<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

Property Description Type Default
v-model:visible Whether to show tips boolean false
primary-text Primary tip text (first line) string '点击右上角'
secondary-text Secondary tip text (second line) string '分享比赛吧～'
custom-class Custom root class name string ''

# Events

Event Description Callback Parameters
close Triggered when clicking mask to close -
update:visible Triggered when visibility changes (visible: boolean)

# Theme Customization

The component provides the following CSS variables for custom styles. Please refer to the ConfigProvider component for usage.

# Style Variables

Name Default Description
--pmspt-overlay-bg rgba(0, 0, 0, .75) Overlay background color
--pmspt-text-color $color-text-invert-light Text color
--pmspt-icon-color $color-text-invert-light IconPlus color
--pmspt-text-font-size $font-size-lg Text font size
--pmspt-icon-size .14rem IconPlus size
--pmspt-icon-margin-left .1rem IconPlus left margin
--pmspt-text-margin-bottom .2rem Text bottom margin
--pmspt-text-item-mb .1rem Text item margin bottom
--pmspt-arrow-width 1.74rem Arrow width
--pmspt-arrow-height 3rem Arrow height
--pmspt-arrow-margin-right 1.2rem Arrow right margin
--pmspt-arrow-bg url(...) Arrow background image
--pmspt-content-height 3rem Content area height
--pmspt-z-index 1000 Component z-index

← MatchSignActionPopup →