MoreHook

Appearance

Return to top
On this page

useFullscreen

控制元素全屏

Demo

source

123

false

Usage

html
<template>
  <div>
    <div style="border: 1px solid red; background: #fff" ref="tar">123</div>
    <p>{{ isFullscreen }}</p>

    <button @click="setFull">设置div全屏</button>
    <button @click="exitFull">退出div全屏</button>
    <button @click="toggle">div-toggle</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useFullscreen } from '@morehook/core'

const tar = ref()
const [isFullscreen, { setFull, exitFull, toggle }] = useFullscreen(tar)
</script>

Type Declarations

typescript
/**
 * onFull: 全屏钩子
 * onExitFull: 退出全屏钩子
 */
interface Options {
  onFull?: () => void
  onExitFull?: () => void
}
/**
 * setFull: 设置全屏
 * exitFull: 退出全屏
 * toggle: 切换是否全屏
 */
interface Actions {
  setFull: () => void
  exitFull: () => void
  toggle: () => void
}
type Target = HTMLElement | (() => HTMLElement) | Ref<HTMLElement>
/**
 * 控制元素全屏
 * @param target 需要全屏的元素(默认 document.body)
 * @param options
 * @returns isFullscreen: 是否全屏状态， actions: 操控是否全屏
 */
export declare function useFullscreen(
  target?: Target,
  options?: Options
): [isFullscreen: Ref<boolean>, actions: Actions]

Source

Source • Demo • Docs