Share Dialog

Import

import PressShare from 'press-plus/press-share/press-share';

export default {
  components: {
    PressShare,
  }
}

Code Demo

Basic Usage

<template>
  <div>
    <button @click="show = true">Show Share Dialog</button>
    
    <PressShare
      :show-share="show"
      :share-title="shareTitle"
      :password="password"
      @update:showShare="value => show = value"
      @shareHandle="onShareHandle"
      @closeDialog="onCloseDialog"
      @copy="onCopy"
    >
      <template #qrcode>
        <img :src="qrCodeUrl" alt="QR Code" />
      </template>
    </PressShare>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      shareTitle: 'Share with friends',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
    };
  },
  methods: {
    onShareHandle(type) {
      console.log('Share type:', type);
      // type possible values: 'facebook', 'whatsapp', 'instagram', 'link'
      this.show = false;
    },
    onCloseDialog() {
      console.log('Close dialog');
      this.show = false;
    },
    onCopy() {
      console.log('Copy password');
      // Implement copy logic
    },
  },
};
</script>

Custom Background

You can customize the dialog background image using the skin-config prop.

<template>
  <div>
    <button @click="show = true">Show Share Dialog (Custom Background)</button>
    
    <PressShare
      :show-share="show"
      :share-title="shareTitle"
      :password="password"
      :skin-config="skinConfig"
      @update:showShare="value => show = value"
      @shareHandle="onShareHandle"
      @closeDialog="onCloseDialog"
      @copy="onCopy"
    >
      <template #qrcode>
        <img :src="qrCodeUrl" alt="QR Code" />
      </template>
    </PressShare>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      shareTitle: 'Share with friends',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
      skinConfig: {
        share_bg: 'https://example.com/custom-bg.png', // Custom background image
      },
    };
  },
  methods: {
    onShareHandle(type) {
      console.log('Share type:', type);
      this.show = false;
    },
    onCloseDialog() {
      console.log('Close dialog');
      this.show = false;
    },
    onCopy() {
      console.log('Copy password');
      // Implement copy logic
    },
  },
};
</script>

Long Press to Save Image

The component supports long press to save image functionality. You can listen to touch events to implement custom long press logic.

<template>
  <div>
    <PressShare
      :show-share="show"
      :share-title="shareTitle"
      :password="password"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <template #qrcode>
        <img :src="qrCodeUrl" alt="QR Code" />
      </template>
    </PressShare>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      shareTitle: 'Share with friends',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
      touchStartTime: 0,
    };
  },
  methods: {
    onTouchStart() {
      this.touchStartTime = Date.now();
    },
    onTouchMove() {
      // Reset on move
      this.touchStartTime = 0;
    },
    onTouchEnd() {
      const touchDuration = Date.now() - this.touchStartTime;
      if (touchDuration > 500) {
        console.log('Long press to save image');
        // Implement save image logic
      }
    },
  },
};
</script>

API

Props

Parameter	Description	Type	Default
show-share	Whether to show dialog	boolean	false
share-title	Share dialog title	string	''
password	Exclusive password	string	''
skin-config	Skin configuration object, can configure share_bg background image	object	{}

Events

Event Name	Description	Callback Parameters
shareHandle	Triggered when clicking share platform	type: Share platform type ('facebook' | 'whatsapp' | 'instagram' | 'link')
closeDialog	Triggered when clicking close button	-
copy	Triggered when clicking copy password button	-
touchstart	Triggered when touch starts (for long press to save image)	-
touchmove	Triggered when touch moves	-
touchend	Triggered when touch ends	-
update:showShare	Triggered when dialog visibility changes	value: New visibility state (boolean)

Slots

Name	Description
qrcode	Custom QR code content area

Features

Share Platforms

The component has four built-in share platform buttons:

• Facebook: Triggers shareHandle event with type 'facebook'
• WhatsApp: Triggers shareHandle event with type 'whatsapp'
• Instagram: Triggers shareHandle event with type 'instagram'
• Copy Link: Triggers shareHandle event with type 'link'

Share Content

The dialog displays the following content:

1. Share Title: Set via share-title prop
2. Share Instructions:
   • Open game activity page
   • Paste password
   • Draw lottery and redeem prizes
3. Exclusive Password: Set via password prop, users can click "Copy Password" button to copy
4. QR Code Image: Customize via qrcode slot, can be shared by long-pressing to save the image

Custom Styling

You can customize the dialog's visual style using the skin-config prop:

• share_bg: Set the background image URL for the share info area

Notes

1. The component uses internationalization support, text content will automatically switch based on language environment
2. Clicking the "Copy Password" button triggers the copy event, you need to implement the specific copy logic in the parent component
3. Use update:showShare event to implement two-way binding for convenient dialog visibility control
4. The specific navigation logic for share platforms needs to be implemented in the shareHandle event callback
5. Long press to save image functionality is implemented through touchstart, touchmove, touchend events, you need to handle the long press logic in the parent component
6. The copy button has .stop modifier added to prevent event bubbling, avoiding conflicts with long press events
7. QR code content is customized via qrcode slot, you can pass in images or other custom content