BizSharePanel 分享面板

分享面板：链接条（一键复制，内置 useClipboard 降级链路）+ 二维码（qrcode 为库直接依赖，无需额外安装）+ 渠道圆形按钮（微博 / QQ 预置 Web 分享模板，微信与自定义渠道经 share 事件外抛）+ 有效期 / 提取码信息行。内容详情页、报表、活动页的转发入口。

基础用法

https://demo.example.com/report/2026-q3

扫码分享

微信

微博

QQ

复制链接

链接复制 + 二维码 + 默认四渠道（微信 / 微博 / QQ / 复制链接）。

<script setup lang="ts">
/** 场景：基础——链接复制 + 二维码 + 默认渠道 */
import { BizSharePanel } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSharePanel
    url="https://demo.example.com/report/2026-q3"
    title="2026 Q3 经营分析报告"
  />
</template>

显示代码

信息行

https://demo.example.com/contract/HT-2026-0888

有效期7 天（2026-10-27 12:00 失效）

提取码8x2k

权限仅查看，禁止下载

扫码分享

微信

微博

QQ

复制链接

infos 展示有效期、提取码等分享配置信息。

<script setup lang="ts">
/** 场景：信息行——有效期 / 提取码 */
import { BizSharePanel } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSharePanel
    url="https://demo.example.com/contract/HT-2026-0888"
    title="项目合同文件"
    :infos="[
      { label: '有效期', value: '7 天（2026-10-27 12:00 失效）' },
      { label: '提取码', value: '8x2k' },
      { label: '权限', value: '仅查看，禁止下载' },
    ]"
  />
</template>

显示代码

自定义渠道

https://demo.example.com/activity/double11

钉钉

飞书

短信

复制链接

channels 自定义渠道列表，channel-xxx 插槽接管图标。

<script setup lang="ts">
/** 场景：自定义渠道 + 图标插槽 */
import { ElMessage } from 'element-plus'
import { BizSharePanel } from 'vue3-ep-biz-lib'
import type { BizShareChannel } from 'vue3-ep-biz-lib'

const channels: BizShareChannel[] = [
  { key: 'dingtalk', label: '钉钉', color: '#1677ff', abbr: '钉' },
  { key: 'feishu', label: '飞书', color: '#3370ff', abbr: '飞' },
  { key: 'sms', label: '短信', color: '#67c23a', abbr: '信' },
  { key: 'link', label: '复制链接' },
]

const onShare = (channel: BizShareChannel): void => {
  ElMessage.info(`${channel.label} 分享动作交给业务层处理`)
}
</script>

<template>
  <BizSharePanel
    url="https://demo.example.com/activity/double11"
    title="双十一大促主会场"
    :channels="channels"
    :show-qrcode="false"
    @share="onShare"
  />
</template>

显示代码

紧凑模式

https://demo.example.com/s/9f8e7d

微信

微博

QQ

复制链接

compact 隐藏二维码与信息行，仅链接 + 渠道，适合嵌入弹层。

<script setup lang="ts">
/** 场景：紧凑模式——嵌入弹层的精简分享条 */
import { BizSharePanel } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSharePanel url="https://demo.example.com/s/9f8e7d" title="分享" compact />
</template>

显示代码

事件

https://demo.example.com/article/1024

微信扫码

微信

微博

QQ

复制链接

share / copy 事件日志（微信弹二维码、自定义渠道跳转等业务动作）。

<script setup lang="ts">
/** 场景：share / copy 事件日志 */
import { ref } from 'vue'
import { BizSharePanel } from 'vue3-ep-biz-lib'
import type { BizShareChannel } from 'vue3-ep-biz-lib'

const logs = ref<string[]>([])

const log = (text: string): void => {
  logs.value.unshift(text)
  if (logs.value.length > 5) logs.value.pop()
}
</script>

<template>
  <div>
    <BizSharePanel
      url="https://demo.example.com/article/1024"
      title="组件库发布 v1.0"
      qr-text="微信扫码"
      @share="(c: BizShareChannel, u: string) => log(`share：${c.label} → ${u.slice(0, 40)}…`)"
      @copy="() => log('copy：链接已复制')"
    />
    <p v-for="(item, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary); word-break: break-all">
      {{ item }}
    </p>
  </div>
</template>

显示代码

编程式

https://demo.example.com/campaign/spring

微信

微博

QQ

复制链接

expose getShareUrl（渠道分享链接模板拼接）/ copyLink。

<script setup lang="ts">
/** 场景：expose getShareUrl / copyLink */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizSharePanel } from 'vue3-ep-biz-lib'
import type { BizShareChannel, BizSharePanelInstance } from 'vue3-ep-biz-lib'

const refEl = ref<BizSharePanelInstance | null>(null)
const preview = ref('')

const showWeibo = (): void => {
  const channel: BizShareChannel = { key: 'weibo', label: '微博' }
  preview.value = refEl.value?.getShareUrl(channel) ?? ''
}
</script>

<template>
  <div>
    <BizSharePanel
      ref="refEl"
      url="https://demo.example.com/campaign/spring"
      title="春季新品发布"
      compact
    />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <ElButton size="small" @click="showWeibo">getShareUrl(微博)</ElButton>
      <ElButton size="small" @click="refEl?.copyLink()">copyLink()</ElButton>
    </div>
    <p v-if="preview" style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary); word-break: break-all">
      {{ preview }}
    </p>
  </div>
</template>

显示代码

二维码尺寸

https://demo.example.com/live/q4-launch

现场大屏扫码进入直播间

微信

微博

QQ

复制链接

qr-size=180 大尺寸二维码，适合现场大屏远距扫码。

<script setup lang="ts">
/** 场景：二维码尺寸与说明——qr-size 180 大码适合远扫 */
import { BizSharePanel } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSharePanel
    url="https://demo.example.com/live/q4-launch"
    title="Q4 新品发布会直播"
    :qr-size="180"
    qr-text="现场大屏扫码进入直播间"
  />
</template>

显示代码

无二维码

https://demo.example.com/p/8812

微信

微博

QQ

复制链接

show-qrcode=false 纯链接 + 渠道转发，嵌入轻量场景。

<script setup lang="ts">
/** 场景：无二维码——show-qrcode=false，链接 + 渠道纯转发 */
import { ElMessage } from 'element-plus'
import { BizSharePanel } from 'vue3-ep-biz-lib'
import type { BizShareChannel } from 'vue3-ep-biz-lib'

const onShare = (channel: BizShareChannel): void => {
  ElMessage.info(`${channel.label} 转发交给业务层`)
}
</script>

<template>
  <BizSharePanel
    url="https://demo.example.com/p/8812"
    title="故障复盘报告"
    :show-qrcode="false"
    @share="onShare"
  />
</template>

显示代码

Props

属性名	类型	默认值	说明
url	string	''	分享链接
title	string	''	分享标题（拼接进渠道文案）
channels	BizShareChannel[]	微信 / 微博 / QQ / 复制链接	渠道列表（key / label / color / abbr）
show-qrcode	boolean	true	二维码
qr-size	number	128	二维码尺寸 px
qr-text	string	'扫码分享'	二维码说明
infos	{ label, value }[]	[]	附加信息行
compact	boolean	false	紧凑模式
copy-text	string	'复制链接'	复制按钮文案

Events

事件名	参数	说明
share	(channel, shareUrl)	渠道点击（微博 / QQ 打开分享页后同样触发；微信 / 自定义渠道由业务层处理）
copy	(url)	链接复制

Slots

插槽名	作用域	说明
channel-	{ channel }	单渠道图标接管

Expose

名称	类型	说明
getShareUrl	(channel) => string	渠道分享链接（含模板拼接）
copyLink	() => void	编程式复制