Sard Uniapp

Appearance

在新窗口打开⤴

ShareSheet分享面板

介绍 ​

从底部向上弹出分享菜单。

引入 ​

js
import ShareSheet from 'sard-uniapp/components/share-sheet/share-sheet.vue'

代码演示 ​

基础使用 ​

使用 v-model:visible 属性控制显隐，使用 itemList 属性配置分享项。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    name: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    icon: 'wechat-fill',
    iconFamily: 'demo-icons',
  },
  {
    name: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    icon: 'alipay-fill',
    iconFamily: 'demo-icons',
  },
  {
    name: 'Twitter',
    color: '#fff',
    background: '#1d9bf0',
    icon: 'twitter-fill',
    iconFamily: 'demo-icons',
  },
  {
    name: 'Facebook',
    color: '#fff',
    background: '#1877f2',
    icon: 'facebook-circle-fill',
    iconFamily: 'demo-icons',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    name: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    icon: "wechat-fill",
    iconFamily: "demo-icons"
  },
  {
    name: "Alipay",
    color: "#fff",
    background: "#1677ff",
    icon: "alipay-fill",
    iconFamily: "demo-icons"
  },
  {
    name: "Twitter",
    color: "#fff",
    background: "#1d9bf0",
    icon: "twitter-fill",
    iconFamily: "demo-icons"
  },
  {
    name: "Facebook",
    color: "#fff",
    background: "#1877f2",
    icon: "facebook-circle-fill",
    iconFamily: "demo-icons"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.name);
};
</script>

多行 ​

itemList 属性值如果是二维数组则渲染成多行。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  [
    {
      name: 'Wechat',
      color: '#fff',
      background: '#0bc15f',
      iconFamily: 'demo-icons',
      icon: 'wechat-fill',
    },
    {
      name: 'Alipay',
      color: '#fff',
      background: '#1677ff',
      iconFamily: 'demo-icons',
      icon: 'alipay-fill',
    },
    {
      name: 'Twitter',
      color: '#fff',
      background: '#1d9bf0',
      iconFamily: 'demo-icons',
      icon: 'twitter-fill',
    },
    {
      name: 'Facebook',
      color: '#fff',
      background: '#1877f2',
      iconFamily: 'demo-icons',
      icon: 'facebook-circle-fill',
    },
  ],
  [
    {
      name: 'Spotify',
      color: '#fff',
      background: '#1ed760',
      iconFamily: 'demo-icons',
      icon: 'spotify-fill',
    },
    {
      name: 'Skype',
      color: '#fff',
      background: '#0b64a4',
      iconFamily: 'demo-icons',
      icon: 'skype-fill',
    },
    {
      name: 'Youtube',
      color: '#fff',
      background: '#ff0000',
      iconFamily: 'demo-icons',
      icon: 'youtube-fill',
    },
    {
      name: 'Paypal',
      color: '#fff',
      background: '#0070ba',
      iconFamily: 'demo-icons',
      icon: 'paypal-fill',
    },
    {
      name: 'Whatsapp',
      color: '#fff',
      background: '#128c7e',
      iconFamily: 'demo-icons',
      icon: 'whatsapp-fill',
    },
    {
      name: 'Telegram',
      color: '#fff',
      background: '#0088cc',
      iconFamily: 'demo-icons',
      icon: 'telegram-fill',
    },
    {
      name: 'Snapchat',
      color: '#000',
      background: '#fffc00',
      iconFamily: 'demo-icons',
      icon: 'snapchat-fill',
    },
  ],
]

const visible = ref(false)

const onSelect = (item: ShareSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  [
    {
      name: "Wechat",
      color: "#fff",
      background: "#0bc15f",
      iconFamily: "demo-icons",
      icon: "wechat-fill"
    },
    {
      name: "Alipay",
      color: "#fff",
      background: "#1677ff",
      iconFamily: "demo-icons",
      icon: "alipay-fill"
    },
    {
      name: "Twitter",
      color: "#fff",
      background: "#1d9bf0",
      iconFamily: "demo-icons",
      icon: "twitter-fill"
    },
    {
      name: "Facebook",
      color: "#fff",
      background: "#1877f2",
      iconFamily: "demo-icons",
      icon: "facebook-circle-fill"
    }
  ],
  [
    {
      name: "Spotify",
      color: "#fff",
      background: "#1ed760",
      iconFamily: "demo-icons",
      icon: "spotify-fill"
    },
    {
      name: "Skype",
      color: "#fff",
      background: "#0b64a4",
      iconFamily: "demo-icons",
      icon: "skype-fill"
    },
    {
      name: "Youtube",
      color: "#fff",
      background: "#ff0000",
      iconFamily: "demo-icons",
      icon: "youtube-fill"
    },
    {
      name: "Paypal",
      color: "#fff",
      background: "#0070ba",
      iconFamily: "demo-icons",
      icon: "paypal-fill"
    },
    {
      name: "Whatsapp",
      color: "#fff",
      background: "#128c7e",
      iconFamily: "demo-icons",
      icon: "whatsapp-fill"
    },
    {
      name: "Telegram",
      color: "#fff",
      background: "#0088cc",
      iconFamily: "demo-icons",
      icon: "telegram-fill"
    },
    {
      name: "Snapchat",
      color: "#000",
      background: "#fffc00",
      iconFamily: "demo-icons",
      icon: "snapchat-fill"
    }
  ]
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.name);
};
</script>

标题和描述 ​

使用 title 和 description 配置标题和描述。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    title="分享到"
    description="这是描述"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    name: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    iconFamily: 'demo-icons',
    icon: 'wechat-fill',
  },
  {
    name: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    iconFamily: 'demo-icons',
    icon: 'alipay-fill',
    description: '这是描述这是描述',
  },
  {
    name: 'Twitter',
    color: '#fff',
    background: '#1d9bf0',
    iconFamily: 'demo-icons',
    icon: 'twitter-fill',
  },
  {
    name: 'Facebook',
    color: '#fff',
    background: '#1877f2',
    iconFamily: 'demo-icons',
    icon: 'facebook-circle-fill',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    title="分享到"
    description="这是描述"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    name: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    iconFamily: "demo-icons",
    icon: "wechat-fill"
  },
  {
    name: "Alipay",
    color: "#fff",
    background: "#1677ff",
    iconFamily: "demo-icons",
    icon: "alipay-fill",
    description: "\u8FD9\u662F\u63CF\u8FF0\u8FD9\u662F\u63CF\u8FF0"
  },
  {
    name: "Twitter",
    color: "#fff",
    background: "#1d9bf0",
    iconFamily: "demo-icons",
    icon: "twitter-fill"
  },
  {
    name: "Facebook",
    color: "#fff",
    background: "#1877f2",
    iconFamily: "demo-icons",
    icon: "facebook-circle-fill"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.name);
};
</script>

图片类型图标 ​

icon 属性可以是图片路径。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    name: 'Sard',
    icon: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
  },
  {
    name: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    iconFamily: 'demo-icons',
    icon: 'wechat-fill',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    name: "Sard",
    icon: "https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg"
  },
  {
    name: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    iconFamily: "demo-icons",
    icon: "wechat-fill"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.name);
};
</script>

禁用 ​

禁用的选项不可点击。

vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'

const itemList = [
  {
    name: 'Wechat',
    color: '#fff',
    background: '#0bc15f',
    icon: 'wechat-fill',
    iconFamily: 'demo-icons',
    disabled: true,
  },
  {
    name: 'Alipay',
    color: '#fff',
    background: '#1677ff',
    icon: 'alipay-fill',
    iconFamily: 'demo-icons',
  },
]

const visible = ref(false)

const onSelect = (item: ShareSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示分享面板</sar-button>
  <sar-share-sheet
    v-model:visible="visible"
    :item-list="itemList"
    cancel="取消"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
  {
    name: "Wechat",
    color: "#fff",
    background: "#0bc15f",
    icon: "wechat-fill",
    iconFamily: "demo-icons",
    disabled: true
  },
  {
    name: "Alipay",
    color: "#fff",
    background: "#1677ff",
    icon: "alipay-fill",
    iconFamily: "demo-icons"
  }
];
const visible = ref(false);
const onSelect = (item) => {
  toast(item.name);
};
</script>

API ​

ShareSheetProps ​

继承 PopupProps 并有以下额外属性：

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
item-list面板选项列表ShareSheetItem[] | ShareSheetItem[][][]
title面板标题string-
description面板描述string-
cancel取消按钮内容string-
visible (v-model)面板是否可见boolean-
overlay-closable点击遮罩后是否关闭booleantrue
before-close关闭前的回调，返回 false 或 rejected 状态的 Promise 可阻止关闭(type: 'close' | 'cancel' | 'select') => boolean | Promise\<any>-
duration显隐动画时长，单位 msnumber300

ShareSheetEmits ​

事件描述类型
update:visible分享面板显隐时触发(visible: boolean) => void
close点击遮罩时触发() => void
cancel点击取消按钮时触发() => void
select点击分享项时触发(item: ShareSheetItem) => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

ShareSheetItem ​

属性描述类型默认值
name名称string-
description标签string-
color图标颜色string-
background图标背景颜色string-
icon图标名称，可以是图片路径string-
iconFamily图标字体string-
disabled禁用状态booleanfalse

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-share-sheet-border-radius: var(--sar-rounded-xl);
  --sar-share-sheet-border-color: var(--sar-border-color);
  --sar-share-sheet-bg: var(--sar-emphasis-bg);

  --sar-share-sheet-header-padding: 32rpx;

  --sar-share-sheet-title-font-size: var(--sar-text-lg);

  --sar-share-sheet-description-margin-top: 16rpx;
  --sar-share-sheet-description-font-size: var(--sar-text-base);
  --sar-share-sheet-description-color: var(--sar-tertiary-color);

  --sar-share-sheet-row-padding-y: 32rpx;
  --sar-share-sheet-row-padding-x: 16rpx;

  --sar-share-sheet-item-width: 160rpx;
  --sar-share-sheet-item-active-opacity: var(--sar-active-opacity);

  --sar-share-sheet-icon-wrapper-size: 96rpx;
  --sar-share-sheet-icon-wrapper-border-radius: var(--sar-rounded-full);

  --sar-share-sheet-icon-font-size: 48rpx;
  --sar-share-sheet-icon-color: var(--sar-tertiary-color);
  --sar-share-sheet-icon-bg: var(--sar-secondary-bg);

  --sar-share-sheet-name-margin-top: 16rpx;
  --sar-share-sheet-name-padding-x: 8rpx;
  --sar-share-sheet-name-font-size: var(--sar-text-base);
  --sar-share-sheet-name-color: var(--sar-tertiary-color);

  --sar-share-sheet-item-description-margin-top: 0;
  --sar-share-sheet-item-description-padding-x: 8rpx;
  --sar-share-sheet-item-description-font-size: var(--sar-text-sm);
  --sar-share-sheet-item-description-color: var(--sar-fourth-color);

  --sar-share-sheet-gap-bg: var(--sar-body-bg);
  --sar-share-sheet-gap-height: 16rpx;

  --sar-share-sheet-cancel-min-height: 96rpx;
  --sar-share-sheet-cancel-padding: 16rpx 32rpx;
  --sar-share-sheet-cancel-font-size: var(--sar-text-lg);
  --sar-share-sheet-cancel-active-bg: var(--sar-active-bg);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao