# 全屏切换组件

vue全屏切换组件

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

# 支持

浏览器支持 (opens new window)

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

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

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

# 在线演示 (opens new window)

# 安装

使用npm命令安装

npm install vue-fullscreen

# 使用

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

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

<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 () {
        await this.$fullscreen.toggle()
      },
    },
    data() {
      return {
        fullscreen: false,
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

# 以api形式使用

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

this.$fullscreen.toggle()

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 方法 & 属性

# 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中传入一个回调函数来获取。

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

1
2
3
4

# 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使任意元素拥有点击切换全屏的效果

<button v-fullscreen>FullScreen</button>

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 修饰符

# pageOnly

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

# teleport

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

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

# 配置项

# target

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

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

# callback

类型: Function
默认值: null

当全屏状态变更时执行。

# fullscreenClass

类型: String
默认值: fullscreen

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

# 以组件形式使用

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 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

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

← CSS3 实现转盘抽奖大图预览插件 →