useShare
リアクティブなWeb Share API。ブラウザは、テキストまたはファイルでコンテンツを共有できる機能を提供します。
share
メソッドは、ボタンクリックなどのユーザー操作の後で呼び出す必要があります。例えば、ページロード時に単純に呼び出すことはできません。これは、悪用を防ぐためです。
デモ
使用方法
JavaScript
import { useShare } from '@vueuse/core'
const { share, isSupported } = useShare()
function startShare() {
share({
title: 'Hello',
text: 'Hello my friend!',
url: location.href,
})
}
ソースrefの受け渡し
ref
を渡すことができます。ソースrefからの変更は、共有オプションに反映されます。
TypeScriptコード
import { ref } from 'vue'
const shareOptions = ref<ShareOptions>({ text: 'foo' })
const { share, isSupported } = useShare(shareOptions)
shareOptions.value.text = 'bar'
share()
JavaScript
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.dokyumento.jp/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>
ソースコード
コントリビューター
変更ログ
v10.0.0-beta.4
2023/4/134d757
- feat(types)!: MaybeComputedRef
をMaybeRefOrGetter
に名前変更0a72b
- feat(toValue): resolveUnref
をtoValue
に名前変更