xtf-share-sheet

组件说明

xtf-share-sheet 是底部分享面板，适用于商品、活动和内容分发；可使用内置渠道预设或自定义渠道。 核心能力以当前 xtf-share-sheet.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <view>
    <xtf-button label="打开" @click="value = true" /><xtf-share-sheet
      v-model="value"
      preset="mini"
      @select="onEvent"
  /></view>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <view>
    <xtf-button label="分享活动" @click="value = true" /><xtf-share-sheet
      v-model="value"
      title="活动投放"
      theme="card"
      :options="[{ name: '复制链接', icon: '链', color: '#2563eb' }]"
      @select="onEvent"
  /></view>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <view>
    <xtf-button label="海外渠道" @click="value = true" /><xtf-share-sheet
      v-model="value"
      preset="overseas"
      :include="['instagram', 'telegram']"
      theme="minimal"
  /></view>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
modelValue	Boolean	undefined	控制组件的 modelValue 行为。	按业务需要设置。
show	Boolean	false	控制组件的 show 行为。	按业务需要设置。
title	String	'分享到'	控制组件的 title 行为。	按业务需要设置。
options	Array	function () { return []	控制组件的 options 行为。	按业务需要设置。
preset	String	''	控制组件的 preset 行为。	按业务需要设置。
include	Array	function () { return []	控制组件的 include 行为。	按业务需要设置。
exclude	Array	function () { return []	控制组件的 exclude 行为。	按业务需要设置。
cancelText	String	'取消'	控制组件的 cancelText 行为。	按业务需要设置。
showCancel	Boolean	true	控制组件的 showCancel 行为。	按业务需要设置。
description	String	''	控制组件的 description 行为。	按业务需要设置。
preview	String	''	控制组件的 preview 行为。	按业务需要设置。
closeOnClickOverlay	Boolean	true	控制组件的 closeOnClickOverlay 行为。	按业务需要设置。
duration	[Number, String]	300	控制组件的 duration 行为。	按业务需要设置。
safeAreaInsetBottom	Boolean	true	控制组件的 safeAreaInsetBottom 行为。	按业务需要设置。
columns	Number	4	控制组件的 columns 行为。	按业务需要设置。
theme	String	'default'	控制组件的 theme 行为。	按业务需要设置。
customClass	String	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object]	''	控制组件的 customStyle 行为。	按业务需要设置。

数据项结构

字段	类型	默认值	说明
id/key	String | Number	index	稳定键；列表、轮播和瀑布流项目建议提供。
title/label/name	String	''	展示名称，具体读取字段见组件对应 prop。
disabled	Boolean	false	禁用可交互项目。

---

事件

事件名称	触发时机	回调参数	参数说明
select	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('select', ...) 为准。
cancel	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('cancel', ...) 为准。
close	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('close', ...) 为准。
update:show	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:show', ...) 为准。
update:modelValue	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:modelValue', ...) 为准。

事件使用示例

<template>
  <xtf-share-sheet @select="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

方法

无公开实例方法，通过 show / modelValue 控制。

---

主题说明

• var(--xtf-radius-md) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-radius-sm) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-radius-xl) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-radius-lg) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-surface-muted) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-space-lg) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-surface) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-space-md) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-space-sm) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-font-font-size-md) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-font-font-weight-semibold) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-text) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。