Fullscreen 全屏

全屏组件。

何时使用

当用户需要将某一区域进行全屏展示时。

基本用法

将需要全屏的容器包裹在<d-fullscreen>标签里面,通过v-model控制全屏状态,传入true则启动全屏,设置成false则退出全屏,也可以通过按下ESC快捷键推出全屏。本例还展示了自定义层级z-index的用法。
<template>
  <d-fullscreen v-model="isOpen" :z-index="20">
    <div class="demo-fullscreen-container">
      <d-button @click="isOpen = !isOpen">{{ btnContent }}</d-button>
    </div>
  </d-fullscreen>
</template>
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const isOpen = ref(false);
    const btnContent = ref('全屏');

    watch(isOpen, (newVal) => {
      if (newVal) {
        btnContent.value = '退出全屏';
      } else {
        btnContent.value = '全屏';
      }
    });

    return {
      isOpen,
      btnContent,
    };
  },
};
</script>
<style>
.demo-fullscreen-container {
  margin: 8px;
}
</style>

全屏模式

通过mode设置全屏模式,默认为normal普通全屏,全屏之后容器将充满整个浏览器窗口,mode设置成immersive可以启用沉浸式全屏,让容器充满整个电脑屏幕。
不管是普通全屏还是沉浸式全屏,都支持按下快捷键ESC退出全屏。
<template>
  <d-fullscreen v-model="isOpenNormal" :z-index="20">
  <div class="demo-fullscreen-container">
      <d-button @click="isOpenNormal = !isOpenNormal">{{ btnContentNormal }}</d-button>
    </div>
  </d-fullscreen>
  
  <d-fullscreen v-model="isOpenImmersive" mode="immersive">
  <div class="demo-fullscreen-container">
      <d-button @click="isOpenImmersive = !isOpenImmersive">{{ btnContentImmersive }}</d-button>
    </div>
  </d-fullscreen>
</template>
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const isOpenNormal = ref(false);
    const btnContentNormal = ref('普通全屏');

    watch(isOpenNormal, (newVal) => {
      if (newVal) {
        btnContentNormal.value = '退出全屏';
      } else {
        btnContentNormal.value = '普通全屏';
      }
    });

    const isOpenImmersive = ref(false);
    const btnContentImmersive = ref('沉浸式全屏');

    watch(isOpenImmersive, (newVal) => {
      if (newVal) {
        btnContentImmersive.value = '退出全屏';
      } else {
        btnContentImmersive.value = '沉浸式全屏';
      }
    });

    return {
      isOpenNormal,
      btnContentNormal,
      isOpenImmersive,
      btnContentImmersive,
    };
  },
};
</script>

Fullscreen 参数

参数名类型默认说明跳转 Demo
v-modelbooleanfalse可选,是否启动全屏基本用法
mode'normal' | 'immersive''normal'可选,设置全屏模式全屏模式
z-indexnumber10可选,设置全屏层级基本用法

Fullscreen 插槽

插槽名说明参数
default默认插槽,全屏容器--
Contributors