hhy5277 / vue-fullscreen

A simple Vue.js component for fullscreen

vue-fullscreen

A simple Vue.js component for fullscreen

Live demo

Quick Example

• Usage with v-for
• Usage with modal

中文文档

Browser support

Full Screen API

Installation

Install from GitHub via NPM

npm install vue-fullscreen

Usage

To use vue-fullscreen, simply import it, and call Vue.use() to install.

<template>
  <div id="app">
    <fullscreen ref="fullscreen" @change="fullscreenChange">
      Content
    </fullscreen>
    <!--  deprecated
      <fullscreen :fullscreen.sync="fullscreen">
        Content
      </fullscreen>
    -->
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import fullscreen from 'vue-fullscreen'
  import Vue from 'vue'
  Vue.use(fullscreen)
  export default {
    methods: {
      toggle () {
        this.$refs['fullscreen'].toggle() // recommended
        // this.fullscreen = !this.fullscreen // deprecated
      },
      fullscreenChange (fullscreen) {
        this.fullscreen = fullscreen
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>

Caution: Because of the browser security function, you can only call these methods by a user gesture(click or keypress).

Caution: Since the prop watcher can not be a sync action now, the browser will intercept the subsequent operation of the callback. I recommend you to call the method directly by refs instead of changing the prop like the old version.

Use as plugin

In your vue component, You can use this.$fullscreen to get the instance.

<template>
  <div id="app">
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
  methods: {
    toggle () {
      this.$fullscreen.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>

Methods & Attributes

toggle([target, options, force])

Toggle the fullscreen mode.

• target:
  • Type: Element
  • Default: document.body
  • The element target for fullscreen.
• options (optional):
  • Type: Object
  • The fullscreen options.
• force (optional):
  • Type: Boolean
  • Default: undefined
  • pass true to force enter , false to exit fullscreen mode.

enter([target, options])

enter the fullscreen mode.

• target:
  • Type: Element
  • Default: document.body
  • The element target for fullscreen.
• options (optional):
  • Type: Object
  • The fullscreen options.

exit()

exit the fullscreen mode.

getState()

get the fullscreen state.

• Type: Boolean

Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

support

check browser support for the fullscreen API.

• Type: Boolean

Options

callback

• Type: Function
• Default: null

It will be called when the fullscreen mode changed.

fullscreenClass

• Type: String
• Default: fullscreen

The class will be added to target element when fullscreen mode is on.

wrap

• Type: Boolean
• Default: true

If true, the target element will be wrapped up in a background div, and you can set the background color.

exitOnClickWrapper

• Type: Boolean
• Default: true

If true, clicking wrapper will exit fullscreen.

background

• Type: String
• Default: #333

The background style of wrapper, only available when fullscreen mode is on and wrap is true.

Use as component

You can simply import the component and register it locally.

<template>
  <div id="app">
    <fullscreen ref="fullscreen" @change="fullscreenChange">
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import Fullscreen from "vue-fullscreen/src/component.vue"
  export default {
    components: {Fullscreen},
    methods: {
      toggle () {
        this.$refs['fullscreen'].toggle()
      },
      fullscreenChange (fullscreen) {
        this.fullscreen = fullscreen
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>

Methods

toggle([force])

Toggle the fullscreen mode.You can pass force to force enter or exit fullscreen mode.

• force (optional):
  • Type: Boolean
  • Default: undefined
  • pass true to force enter , false to exit fullscreen mode.

enter()

enter the fullscreen mode.

exit()

exit the fullscreen mode.

getState()

get the fullscreen state.

• Type: Boolean

Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

Props

fullscreen-class

• Type: String
• Default: fullscreen

The class will be added to the component when fullscreen mode is on.

background

• Type: String
• Default: #333

The background style of component, only available when fullscreen mode is on.

exit-on-click-wrapper

• Type: Boolean
• Default: true

If true, clicking wrapper will exit fullscreen.

Events

change

• isFullscreen: The current fullscreen state.

This event fires when the fullscreen mode changed.

No conflict

If you need to avoid name conflict, you can import it like this:

<template>
  <div id="app">
    <fs ref="fullscreen">
      Content
    </fs>
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import Fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(Fullscreen, {name: 'fs'})
export default {
  methods: {
    toggle () {
      this.$refs['fullscreen'].toggle()
      this.$fs.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>