Fullscreen组件api、demo优化讨论

[kagol]

api

Fullscreen组件：https://vue-devui.github.io/components/fullscreen/

Fullscreen组件目前的设计是通过fullscreen-target和fullscreen-launch两个属性选择器来区分：

• fullscreen-target - 触发全屏的目标按钮
• fullscreen-launch - 需要全屏的元素

并且这两个元素必须包裹在<d-fullscreen>组件里面。

这样不太合理，使用起来很别扭，建议用以下方式实现全屏组件：

1. <d-fullscreen>组件只承载需要全屏的元素，它里面包裹的元素就是需要全屏的元素
2. <d-fullscreen>组件设置一个isOpen属性，用来设置全屏的开启与关闭，这样就可以通过外部控制全屏
3. 这样设计的话，全屏之后的回调函数fullscreenLaunch也可以废弃了
4. 再给<d-fullscreen>组件增加一个onClose关闭全屏的回调函数，退出全屏的时候会触发这个回调函数

使用方式大致如下：

<d-button onClick={isOpen = !isOpen}>Open Fullscreen</d-button>
<d-fullscreen  isOpen={isOpen} onClose={onClose}>
  <div>需要全屏的元素</div>
</d-fullscreen>

[kagol]

Fullscreen组件优化方案：

普通全屏

充满当前浏览器窗口的普通全屏。

<template>
  <d-fullscreen v-model="isOpen">
    <div>
      <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 {
      btnContent,
      isOpen,
    }
  }
}
</script>

沉浸式全屏

充满整个显示器屏幕的沉浸式全屏。

<template>
  <d-fullscreen v-model="isOpen" mode="immersive">
    <div>
      <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 {
      btnContent,
      isOpen,
    }
  }
}
</script>

参数及API

参数	类型	默认	说明
v-model	Boolean	false	可选，是否启动全屏
mode	immersive 或 normal	normal	可选，设置全屏模式
z-index	Number	10	可选，设置全屏层级

[kagol]

已优化