Press Plus

# Share 分享弹窗

# 引入

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

export default {
  components: {
    PressShare,
  }
}

# 代码演示

# 基础用法

<template>
  <div>
    <button @click="show = true">显示分享弹窗</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: '分享给好友',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
    };
  },
  methods: {
    onShareHandle(type) {
      console.log('分享类型:', type);
      // type 可能的值: 'facebook', 'whatsapp', 'instagram', 'link'
      this.show = false;
    },
    onCloseDialog() {
      console.log('关闭弹窗');
      this.show = false;
    },
    onCopy() {
      console.log('复制口令');
      // 实现复制逻辑
    },
  },
};
</script>

# 自定义背景

通过 skin-config 属性可以自定义弹窗背景图。

<template>
  <div>
    <button @click="show = true">显示分享弹窗（自定义背景）</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: '分享给好友',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
      skinConfig: {
        share_bg: 'https://example.com/custom-bg.png', // 自定义背景图
      },
    };
  },
  methods: {
    onShareHandle(type) {
      console.log('分享类型:', type);
      this.show = false;
    },
    onCloseDialog() {
      console.log('关闭弹窗');
      this.show = false;
    },
    onCopy() {
      console.log('复制口令');
      // 实现复制逻辑
    },
  },
};
</script>

# 长按保存图片

组件支持长按保存图片功能，可以监听 touch 事件来实现自定义的长按逻辑。

<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: '分享给好友',
      password: 'ILG5dea7e140591a902b133d82d3c20dea1',
      qrCodeUrl: 'https://example.com/qrcode.png',
      touchStartTime: 0,
    };
  },
  methods: {
    onTouchStart() {
      this.touchStartTime = Date.now();
    },
    onTouchMove() {
      // 移动时重置
      this.touchStartTime = 0;
    },
    onTouchEnd() {
      const touchDuration = Date.now() - this.touchStartTime;
      if (touchDuration > 500) {
        console.log('长按保存图片');
        // 实现保存图片逻辑
      }
    },
  },
};
</script>

# API

# Props

参数 说明 类型 默认值
show-share 是否显示弹窗 boolean false
share-title 分享弹窗标题 string ''
password 专属口令 string ''
skin-config 皮肤配置对象，可配置 share_bg 背景图 object {}

# Events

事件名 说明 回调参数
shareHandle 点击分享平台时触发 type: 分享平台类型 ('facebook' | 'whatsapp' | 'instagram' | 'link')
closeDialog 点击关闭按钮时触发 -
copy 点击复制口令按钮时触发 -
touchstart 触摸开始时触发（用于长按保存图片） -
touchmove 触摸移动时触发 -
touchend 触摸结束时触发 -
update:showShare 弹窗显示状态变化时触发 value: 新的显示状态 (boolean)

# Slots

名称 说明
qrcode 自定义二维码内容区域

# 功能说明

# 分享平台

组件内置了四种分享平台按钮：

  • Facebook：点击触发 shareHandle 事件，type 为 'facebook'
  • WhatsApp：点击触发 shareHandle 事件，type 为 'whatsapp'
  • Instagram：点击触发 shareHandle 事件，type 为 'instagram'
  • 复制链接：点击触发 shareHandle 事件，type 为 'link'

# 分享内容

弹窗中展示的内容包括：

  1. 分享标题：通过 share-title 属性设置
  2. 分享步骤说明：
    • 打开游戏活动页面
    • 粘贴口令
    • 抽奖兑换奖品
  3. 专属口令：通过 password 属性设置，用户可以点击"复制口令"按钮复制
  4. 二维码图片：通过 qrcode 插槽自定义二维码内容，可通过长按保存图片的方式分享

# 自定义样式

通过 skin-config 属性可以自定义弹窗的视觉样式：

  • share_bg：设置分享信息区域的背景图片 URL

# 注意事项

  1. 组件使用了国际化支持，文本内容会根据语言环境自动切换
  2. 点击"复制口令"按钮会触发 copy 事件，需要在父组件中实现具体的复制逻辑
  3. 使用 update:showShare 事件可以实现双向绑定，方便控制弹窗显示状态
  4. 分享平台的具体跳转逻辑需要在 shareHandle 事件回调中实现
  5. 长按保存图片功能通过 touchstart、touchmove、touchend 事件实现，需要在父组件中处理长按逻辑
  6. 复制按钮已添加 .stop 修饰符阻止事件冒泡，避免与长按事件冲突
  7. 二维码内容通过 qrcode 插槽自定义，可以传入图片或其他自定义内容

← ClipboardSimple →