useShare

反应式 网络共享 API。浏览器提供可以共享文本或文件内容的函数。

¥Reactive Web Share API. The Browser provides features that can share content in text or file.

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

¥The share method has to be called following a user gesture like a button click. It can’t simply be called on page load for example. That’s in place to help prevent abuse.

示例

源代码演练场

用法

¥Usage

import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

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

传递源引用

¥Passing a source ref

你可以将 ref 传递给它，源引用的更改将反映到你的共享选项中。

¥You can pass a ref to it, changes from the source ref will be reflected to your sharing options.

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/useShare
 * @param shareOptions
 * @param options
 */
export declare function useShare(
  shareOptions?: MaybeRefOrGetter<UseShareOptions>,
  options?: ConfigurableNavigator,
): {
  isSupported: ComputedRef<boolean>
  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
}
export type UseShareReturn = ReturnType<typeof useShare>

源代码

源代码 • 示例 • 文档

变更日志

v13.6.0 on

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)