layui/example/docs/zh-CN/components/fullscreen.md

::: anchor :::

::: title 基本介绍 :::

::: describe 将某一区域的内容全屏展示。 :::

::: title 浏览器全屏 :::

::: demo 使用 lay-fullscreen 标签包裹触发全屏事件的按钮

进入全屏 退出 切换: {{isFullscreen ? "退出" : "进入全屏"}}

:::

::: title 局部区域全屏 :::

::: demo 使用 target 属性指定需要局部全屏的元素, 组件必须用 div 包裹, 因为不是所有元素都能向浏览器请求全屏

进入全屏 退出 切换: {{isFullscreen ? "退出" : "进入全屏"}}

:::

::: title 浏览器窗口内全屏 :::

::: demo 使用 target 属性指定需要局部全屏的元素, 并设置immersive属性为 false,可使 target 在浏览器窗口内全屏

进入全屏 退出 切换: {{isFullscreen ? "退出" : "进入全屏"}}

:::

::: title 铺满特定容器 :::

::: demo 使用 target 属性指定需要局部全屏的元素, 并设置immersive = false, position="absolute",可使 target 在特定容器内全屏

进入全屏 退出 切换: {{isFullscreen ? "退出" : "进入全屏"}}

:::

:::title fullscreen 属性 :::

:::table

属性	描述	类型	默认值	可选值
target	可选，要全屏显示的元素	HTMLElement	html	-
immersive	可选，全屏模式，false时浏览器窗口内全屏	boolean	true	true false
position	可选，浏览器窗口内全屏定位模式	string	-	absolute fixed
zIndex	可选，全屏层级	string	-	-
:::

:::title fullscreen 事件 :::

:::table

事件	描述	参数
fullscreenchange	全屏更改事件回调	isFullscreen 是否全屏
:::

:::title fullscreen 插槽 :::

:::table

插槽	描述	参数
default	默认插槽	-
:::

:::title fullscreen 插槽属性 :::

:::table

属性	描述	类型	参数
enter	进入全屏	Function	可选,HTMLElement
exit	退出全屏	Function	可选,HTMLElement /
toggle	进入/退出全屏	Function	-
isFullscreen	是否全屏	boolean	-
:::