3

全屏切换组件vue-fullscreen

 5 months ago
source link: https://mirari.cc/posts/vue-fullscreen
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vue-fullscreen #

一个用于将任意页面元素进行全屏切换的vue组件，基于 screenfull.js

有任何问题请到github项目页提交issue，博客的留言我可能无法及时看到，谢谢各位支持👍。

vue-fullscreen for vue3 #

在线演示 #

使用示例 #

支持 #

浏览器支持

注意: 在IE浏览器下使用需要先实现Promise的polyfill.

注意: Safari浏览器在桌面和iPad下支持，但iPhone不支持.

注意: 当处在全屏模式中，浏览其他页面，切换标签页，或者切换到其他应用（例如使用 Alt-Tab）也会导致退出全屏模式。

了解更多

从<=2.3.5版本迁移 #

组件 #

一般情况下你可以直接使用双向绑定来修改组件全屏状态了，无需直接调用组件的内部方法。

background属性已移除，你可以直接在组件上设置样式。

Api #

wrapper和background等与它相关的配置项已移除，它们使用场景有限，可定制性不强，而且你可以自己简单地实现它。

方法名更改如下:

旧新
enterrequest
supportisEnabled
getState()isFullscreen

安装 #

使用npm命令安装

bash
npm install vue-fullscreen

使用 #

引入vue-fullscreen，并使用Vue.use()注册插件，之后即可使用。

组件、指令和api会被一起安装到app全局。

html
<template>
  <div>
    <!-- Component  -->
    <fullscreen v-model="fullscreen">
      content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
    <!-- Api  -->
    <button type="button" @click="toggleApi" >FullscreenApi</button>
    <!-- Directive  -->
    <button type="button" v-fullscreen >FullscreenDirective</button>
  </div>
</template>
<script>
  import VueFullscreen from 'vue-fullscreen'
  import Vue from 'vue'
  Vue.use(VueFullscreen)
  export default {
    methods: {
      toggle () {
        this.fullscreen = !this.fullscreen
      },
      toggleApi () {
        this.$fullscreen.toggle()
      },
    },
    data() {
      return {
        fullscreen: false,
      }
    }
  }
</script>

注意: 由于浏览器的安全限制，全屏切换必须由一个用户操作事件发起，比如click或keypress。

以api形式使用 #

在Vue组件实例中，可以直接调用this.$fullscreen来获取全屏api。

javascript
this.$fullscreen.toggle()

或者你可以单独引入api然后执行它。

html
<template>
  <div>
    <div class="fullscreen-wrapper">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import { api as fullscreen } from 'vue-fullscreen'
export default {
  methods: {
    async toggle () {
      await fullscreen.toggle(this.$el.querySelector('.fullscreen-wrapper'), {
        teleport: this.teleport,
        callback: (isFullscreen) => {
          //this.fullscreen = isFullscreen
        },
      })
      this.fullscreen = fullscreen.isFullscreen
    },
  },
  data() {
    return {
      fullscreen: false,
      teleport: true,
    }
  }
}
</script>

方法 & 属性 #

toggle([target, options, force]) #

切换全屏模式。

  • target:
    • 类型: Element
    • 默认值: document.body
    • 全屏操作的目标元素。
  • options (可选):
    • 类型: Object
    • 配置项，详见下文。
  • force (可选):
    • 类型: Boolean
    • 默认值: undefined
    • 传入true可以指定进入全屏模式，效果与request方法相同，false反之。

request([target, options]) #

进入全屏模式。

  • target:
    • 类型: Element
    • 默认值: document.body
    • 全屏操作的目标元素。
  • options (optional):
    • 默认值: Object
    • 配置项，详见下文。

exit() #

退出全屏模式。

注意: 这些方法都会返回一个Promise对象，你可以在Promise执行完成后获取状态，或者在options中传入一个回调函数来获取。

javascript
async toggle () {
  await this.$fullscreen.toggle()
  this.fullscreen = this.$fullscreen.isFullscreen
}

isFullscreen #

判断是否处于全屏状态。

  • 类型: Boolean

注意: 唤起全屏的动作是异步的,在调用方法后你无法立即获取预期的结果。

isEnabled #

判断环境是否支持全屏API。

  • 类型: Boolean

element #

获取当前全屏的元素

  • 类型: Element | null

配置项 #

callback #

  • 类型: Function
  • 默认值: null

当全屏状态变更时执行。

fullscreenClass #

  • 类型: String
  • 默认值: fullscreen

这个样式会在进入全屏状态时被添加到目标元素上。

pageOnly #

  • 类型: Boolean
  • 默认值: false

如果为true，不调用全屏API，而是将当前元素撑满网页。

注意: 如果浏览器不支持全屏API，这个选项默认值为true.

teleport #

  • 类型: Boolean
  • 默认值: true

如果为true， 进入全屏时目标元素会被移动到document.body下。

这可以避免一些弹窗在全屏模式下看不到的问题。

以指令形式使用 #

你可以使用v-fullscreen使任意元素拥有点击切换全屏的效果

html
<button v-fullscreen>FullScreen</button>

或者你可以单独引入指令并安装它。

html
<template>
  <div>
    <div class="fullscreen-wrapper">
      Content
    </div>
    <button type="button" v-fullscreen.teleport="options" >Fullscreen</button>
  </div>
</template>
<script>
import { directive as fullscreen } from 'vue-fullscreen'
export default {
  directives: {
    fullscreen
  },
  data() {
    return {
      options: {
        target: ".fullscreen-wrapper",
        callback (isFullscreen) {
          console.log(isFullscreen)
        },
      },
    }
  }
}
</script>

修饰符 #

pageOnly #

不调用全屏API，而是将当前元素撑满网页。

teleport #

进入全屏时目标元素会被移动到document.body下。

这可以避免一些弹窗在全屏模式下看不到的问题。

配置项 #

target #

  • 类型: String | Element
  • 默认值: document.body

全屏操作的目标元素。可以使用样式选择器字符串来指定元素，相当于document.querySelector(target)。注意直接传递元素对象时，需要确保该元素已存在。指令被初始化时，当前组件的内部元素可能尚未初始化。

callback #

  • 类型: Function
  • 默认值: null

当全屏状态变更时执行。

fullscreenClass #

  • 类型: String
  • 默认值: fullscreen

这个样式会在进入全屏状态时被添加到目标元素上。

以组件形式使用 #

你可以单独引入全屏组件并局部注册它。

html
<template>
  <div>
    <fullscreen :fullscreen.sync="fullscreen" :teleport="teleport" :page-only="pageOnly" >
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import { component } from 'vue-fullscreen'
  export default {
    components: {
      fullscreen: component,
    },
    methods: {
      toggle () {
        this.fullscreen = !this.fullscreen
      },
    },
    data() {
      return {
        fullscreen: false,
        teleport: true,
        pageOnly: false,
      }
    }
  }
</script>

Props属性 #

fullscreen-class #

  • 类型: String
  • 默认值: fullscreen

全屏组件的样式类，只有全屏时才生效。

exit-on-click-wrapper #

  • 类型: Boolean
  • 默认值: true

如果为true， 点击全屏组件的空白部分会退出全屏。

page-only #

  • 类型: Boolean
  • 默认值: false

如果为true，不调用全屏API，而是将当前组件撑满网页。

注意: 如果浏览器不支持全屏API，这个选项默认值为true.

teleport #

  • 类型: Boolean
  • 默认值: true

如果为true, 进入全屏时当前组件会被移动到document.body下。

这可以避免一些弹窗在全屏模式下看不到的问题。

事件 #

change #

  • isFullscreen: 当前的全屏状态。

在全屏状态改变时触发。

插件配置项 #

name #

  • 类型: String
  • 默认值: fullscreen

如果你需要避免重名冲突，可以像这样引入:

html
<template>
  <div>
    <!-- Component  -->
    <fs v-model="fullscreen" :teleport="teleport" :page-only="pageOnly" @change="fullscreenChange" >
      content
    </fs>
    <button type="button" @click="toggle" >Fullscreen</button>
    <!-- Api  -->
    <button type="button" @click="toggleApi" >FullscreenApi</button>
    <!-- Directive  -->
    <button type="button" v-fs.teleport >FullscreenDirective</button>
  </div>
</template>
<script>
import VueFullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(VueFullscreen, {name: 'fs'})
export default {
  methods: {
    toggle () {
      this.fullscreen = !this.fullscreen
    },
    toggleApi() {
      this.$fs.toggle()
    },
  },
  data() {
    return {
      fullscreen: false,
    }
  }
}
</script>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK