Skip to content

useShare

类别
导出体积
360 B
上次更改
2 months ago

响应式 Web Share API。浏览器提供了可以分享文本或文件内容的功能。

必须在用户操作 (如按钮点击) 之后调用 share 方法。不能在页面加载时简单地调用它。这是为了防止滥用而设定的。

Demo

用法

ts
import { 
useShare
} from '@vueuse/core'
const {
share
,
isSupported
} =
useShare
()
function
startShare
() {
share
({
title
: 'Hello',
text
: 'Hello my friend!',
url
:
location
.
href
,
}) }

传递源引用

你可以传递一个 ref,源引用的更改将反映到你的分享选项中。

ts
import { 
ref
} from 'vue'
const
shareOptions
=
ref
<
ShareOptions
>({
text
: 'foo' })
const {
share
,
isSupported
} = useShare(
shareOptions
)
shareOptions
.value.text = 'bar'
share
()
js
import { ref } from 'vue'
const shareOptions = ref({ text: 'foo' })
const { share, isSupported } = useShare(shareOptions)
shareOptions.value.text = 'bar'
share()

类型声明

ts
export interface UseShareOptions {
  
title
?: string
files
?: File[]
text
?: string
url
?: string
} /** * 响应式 Web Share API. * 浏览器提供了可以分享文本或文件内容的功能。 * * @see https://vueuse.org/useShare * @param shareOptions * @param options * * @__NO_SIDE_EFFECTS__ */ export declare function
useShare
(
shareOptions
?:
MaybeRefOrGetter
<UseShareOptions>,
options
?:
ConfigurableNavigator
,
): {
isSupported
:
ComputedRef
<boolean>
share
: (
overrideOptions
?:
MaybeRefOrGetter
<UseShareOptions>) =>
Promise
<void>
} export type
UseShareReturn
=
ReturnType
<typeof
useShare
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Antério Vieira
SerKo
Anthony Fu
Jelf
IlyaL
无尘室内点墨
三咲智子 Kevin Deng
Shinigami
João Eudes Lima

更新日志

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native