useShare

分類

Browser

導出大小

365 B

最後變更

5 天前

反應式的 Web Share API。瀏覽器提供可以分享文字或檔案內容的功能。

share 方法必須在使用者手勢（例如按鈕點擊）之後呼叫。例如，它不能簡單地在頁面載入時呼叫。這是為了防止濫用。

示範

source

用法

import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

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

傳遞 source ref

您可以傳遞一個 ref 給它，來自 source 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()

類型宣告

typescript

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