useShare

分类

浏览器

导出大小

360 B

上次更改

上个月

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

share 方法必须在用户手势（例如按钮点击）之后调用。例如，它不能简单地在页面加载时调用。这是为了防止滥用。

演示

源代码在线演练 (beta)

用法

import { useShare
 } from '@vueuse/core'

const { share
, isSupported
 } = useShare
()

function startShare
() {
  share
({
    title
: 'Hello',
    text
: 'Hello my friend!',
    url
: location
.href
,
  })
}

传入源引用

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

TypeScript

import { ref
 } from 'vue'

const shareOptions
 = ref
<ShareOptions
>({ text
: 'foo' })
const { share
, isSupported
 } = useShare(shareOptions
)

shareOptions
.value.text = 'bar'

share
()

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

类型声明

export interface UseShareOptions {
  title
?: string
  files
?: File[]
  text
?: string
  url
?: string
}
/**
 * Reactive Web Share API.
 *
 * @see https://vueuse.org.cn/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
>