A simple Vue.js component for fullscreen, based on screenfull.js

Related tags

vue-fullscreen
Overview

vue-fullscreen

A simple Vue.js component for fullscreen, based on screenfull.js

npm version language

npm version language

npm download license

vue-fullscreen for vue3

Live demo

Quick Example

中文文档

Support

Supported browsers

Note: In order to use this package in Internet Explorer, you need a Promise polyfill.

Note: Safari is supported on desktop and iPad, but not on iPhone.

Note: Navigating to another page, changing tabs, or switching to another application using any application switcher (or Alt-Tab) will likewise exit full-screen mode.

Learn more

Migration from <= 2.3.5

Component

In general, you can simply switch the fullscreen state using two-way binding, so you don't have to call the component methods directly.

The background prop are removed, you can set it directly on the component

Api

The wrapper and options such as background associated with it are removed, which has limited use cases, is not very customizable, and you can simply implement it yourself.

The method names are changed as follows:

old new
enter request
support isEnabled
getState() isFullscreen

Installation

Install from NPM

npm install vue-fullscreen

Usage

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

The component and api will be installed together in the global.

content
content
">
<template>
  <div>
    <fullscreen :fullscreen.sync="fullscreen">
      content
    fullscreen>
    <button type="button" @click="toggle" >Fullscreenbutton>
    <div class="fullscreen-wrapper">
      content
    div>
    <button type="button" @click="toggleApi" >FullscreenApibutton>
  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(this.$el.querySelector('.fullscreen-wrapper'), {
          teleport: this.teleport,
          callback: (isFullscreen) => {
            this.fullscreen = isFullscreen
          },
        })
      },
    },
    data() {
      return {
        fullscreen: false,
        teleport: true,
        pageOnly: false,
      }
    }
  }
script>

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

Usage of api

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

Or you can just import the api method and call it.

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

request([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.

isFullscreen

get the fullscreen state.

  • Type: Boolean

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

isEnabled

check browser support for the fullscreen API.

  • Type: Boolean

element

get the fullscreen element.

  • Type: Element | null

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.

pageOnly

  • Type: Boolean
  • Default: false

If true, only fill the page with current element.

Note: If the browser does not support full-screen Api, this option will be automatically enabled.

teleport

  • Type: Boolean
  • Default: true

If true, the target element will be appended to document.body when it is fullscreen.

This can avoid some pop-ups not being displayed.

Use as component

You can simply import the component and register it locally.

Content
">
<template>
  <div>
    <fullscreen :fullscreen.sync="fullscreen" :teleport="teleport" :page-only="pageOnly" >
      Content
    fullscreen>
    <button type="button" @click="toggle" >Fullscreenbutton>
  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

  • Type: String
  • Default: fullscreen

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

exit-on-click-wrapper

  • Type: Boolean
  • Default: true

If true, clicking wrapper will exit fullscreen.

page-only

  • Type: Boolean
  • Default: false

If true, only fill the page with current element.

Note: If the browser does not support full-screen Api, this option will be automatically enabled.

teleport

  • Type: Boolean
  • Default: true

If true, the component will be appended to document.body when it is fullscreen.

This can avoid some pop-ups not being displayed.

Events

change

  • isFullscreen: The current fullscreen state.

This event fires when the fullscreen mode changed.

Plugin options

name

  • Type: String
  • Default: fullscreen

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

content
content
">
<template>
  <div>
    <fs :fullscreen.sync="fullscreen" :teleport="teleport" :page-only="pageOnly" @change="fullscreenChange" >
      content
    fs>
    <button type="button" @click="toggle" >Fullscreenbutton>
    <div class="fullscreen-wrapper">
      content
    div>
    <button type="button" @click="toggleApi" >FullscreenApibutton>
  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(this.$el.querySelector('.fullscreen-wrapper'), {
        teleport: this.teleport,
        callback: (isFullscreen) => {
          this.fullscreen = isFullscreen
        },
      })
    },
  },
  data() {
    return {
      fullscreen: false,
      teleport: true,
      pageOnly: false,
    }
  }
}
script>
Issues
  • Fullscreen close when i navigate between pages..

    Fullscreen close when i navigate between pages..

    as title, fullscreen closed once i navigate to other pages

    opened by EpitechGuo 7
  • Are there plans to support VUE3

    Are there plans to support VUE3

    The authors have plans to support vue3 ?

    opened by snoobcn 6
  • Compile vue-fullscreen with application

    Compile vue-fullscreen with application

    Hi, I have a custom video-player Vue application (using vue-fullscreen) that I am packaging on npm, and using within the client of a different Vue application. Vue-fullscreen works in the first application, but for it to work in the client application, I have to install it there too, and add a rule to the vue-loader.

    Is there a way to import vue-fullscreen so that it's included in my video-player application? In other words, I would like to be able to use my video-player in projects that don't have vue-fullscreen explicitly installed.

    Sorry if this is documented somewhere, I've been looking but can't find it.

    opened by theochit 6
  • 全屏之后,上面再有弹框的情况下,会有点击穿透的现象

    全屏之后,上面再有弹框的情况下,会有点击穿透的现象

    在没有全屏之前,点击弹框,能操作弹框里面的表单内容。

    全屏之后,最开始因为wrapper的层级太高,所以我把弹框的层级设置的比wrapper更高,弹框能出来了,但是却无法操作,鼠标点击的时候,只能点击全屏页面,无法点击全屏页面上面的那个弹框。

    请问有其他方法能解决这个问题吗。

    opened by szagnesc 5
  • fullscreen status check

    fullscreen status check

    How do I know the status of the fullscreen?

    opened by nunob87 4
  • build: use minified dist file

    build: use minified dist file

    opened by qkdreyer 4
  • TypeError: $event.stopPropagation is not a function stopPropagation called earlier

    TypeError: $event.stopPropagation is not a function stopPropagation called earlier

    We track modal window click if it is outside modal content, close modal

     <em @click.stop="hideModal" />
    

    The button is outside modal, we have to stopPropagination in order to prevent closing modal and open fullscreen

    <em @click.stop="toggleFullScreeMode"
    v-if="!isFullScreen"
                              />
    

    This way error is thrown

    [Vue warn]: Error in v-on handler: "TypeError: $event.stopPropagation is not a function"
    
    found in
    
    ---> <Fullscreen>
           <ImageModal> at src/components/public/partials/modal/image_modal.vue
             <PublicGallery> at src/components/public/pages/gallery.vue
               <PublicBasicLayout> at src/components/public/layouts/basic.vue
                 <App> at src/App.vue
                   <Root>
    warn @ vue.js:633
    logError @ vue.js:1892
    globalHandleError @ vue.js:1887
    handleError @ vue.js:1847
    invokeWithErrorHandling @ vue.js:1870
    invoker @ vue.js:2187
    invokeWithErrorHandling @ vue.js:1862
    Vue.$emit @ vue.js:3888
    fullScreenCallback @ vue-fullscreen.min.js:1
    vue.js:1896 TypeError: $event.stopPropagation is not a function
        at change (image_modal.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:17)
        at invokeWithErrorHandling (vue.js:1862)
        at VueComponent.invoker (vue.js:2187)
        at invokeWithErrorHandling (vue.js:1862)
        at VueComponent.Vue.$emit (vue.js:3888)
        at VueComponent.fullScreenCallback (vue-fullscreen.min.js:1)
    
    opened by BonBonSlick 3
  • fix: fix typescript typings after relocation

    fix: fix typescript typings after relocation

    While testing the types in my local branch in jellyfin-vue, somehow everything worked right and it autocompleted everything, so didn't bother to actually build the client and see if the types were working properly.

    I think VSCode cached the local typings instead of the package's ones somehow so it didn't report any error, as I didn't close and reopen it.

    Also, perhaps the location change messed things somehow.

    Either way, this fixes the import of the package and the use with Vue.use as you state in the docs in TypeScript environments (JS ones were unaffected)

    opened by ferferga 3
  • Add method checking browser support (`isSupported`)

    Add method checking browser support (`isSupported`)

    Please let me know if I should build the project or if you do it.

    opened by vincentdoerig 3
  • TypeError: this.$refs.fullscreen.toggle is not a function

    TypeError: this.$refs.fullscreen.toggle is not a function

    Hi! I copy and compile example:

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

    In browser:

    image

    But after click Fullscreen button nothing happened. In browser colsole I see error:

    TypeError: this.$refs.fullscreen.toggle is not a function
        at a.toggle (Field:1)
        at It (vendor.js?id=8e2b892a6851ec634c14:1)
        at HTMLButtonElement.n (vendor.js?id=8e2b892a6851ec634c14:1)
        at HTMLButtonElement.Zr.o._wrapper (vendor.js?id=8e2b892a6851ec634c14:1)
    
    opened by 4n70w4 7
  • Disabling popout close button

    Disabling popout close button

    Hey there,

    First of all - fantastic package!

    Just wondering if there's a way to disable the X in the dark circle that slides in from the top, when the mouse is near the border of the top of the screen?

    Thanks in advance.

    opened by Rhonage 1
  • Fullscreen mode closes after file uploading

    Fullscreen mode closes after file uploading

    If i want to upload some files (inside fullscreen) - fullscreen instantly closes. Can i prevent it?

    opened by LavrovE 2
  • Crash on Server Side Rendering

    Crash on Server Side Rendering

    import fullscreen from 'vue-fullscreen'
    Vue.use(fullscreen)
    
    ReferenceError: document is not defined
        at r (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:772)
        at Object.<anonymous> (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:3418)
        at t (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:330)
        at Object.<anonymous> (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:3642)
        at t (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:330)
        at /var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:713
        at /var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:722
        at /var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:81
        at Object.<anonymous> (/var/www/html/node_modules/vue-fullscreen/dist/vue-fullscreen.min.js:1:207)
        at Module._compile (internal/modules/cjs/loader.js:1133:30)
    
    opened by fif1973 2
  • Vuetify modal and dropdown is not showing while fullscreen

    Vuetify modal and dropdown is not showing while fullscreen

    In Normal screen, The modal and dropdown is showing properly. But in full screen mode it is not showing. Please provide the solution for this issue. Thank you in advance

    opened by bhavinichauhan-easternts 8
  • Bootstrap tooltip and popover not work when fullscreen

    Bootstrap tooltip and popover not work when fullscreen

    As stated in title, Bootstrap tooltip and popover not work when fullscreen? How to overcome this?

    opened by bagaskarala 1
  • There are several circumstances that will be very stuck.

    There are several circumstances that will be very stuck.

    1. When the amount of data is large;
    2. Page structure is complex;
    3. When there is a lot of HTML

    I view performance in Google Browser, CPU is especially consumed when rendering is found. image

    image

    Number 1 will be enter fullscreen, Number 2 is in fullscreen, Number 3 is exit fullscreen.

    What is the solution? Thanks!

    opened by rebitco 1
  • FullScreen is not working with iPad

    FullScreen is not working with iPad

    Hi,

    this.$refs['fullscreen'].toggle() is not working with iPad devices but works with Desktop and Tablets.

    How to fix this?

    Thanks in advance!

    opened by subashdbc 1
  • Override Escape Key

    Override Escape Key

    Hello, Is it possible to make it where the escape key can be suppressed or ignored with this component? I have a component which I am trying to use this on that launches other modal dialogs. The escape key is intended to be used to close my modals, however, I can not seem to bypass this functionality by overriding and preventing propagation on my own.

    Can you add an option to ignore the esape key to your code ?

    opened by SmarterPhoneLabs 2
  • 全屏模式下的快捷键修改

    全屏模式下的快捷键修改

    请问下怎么能替换全屏模式下的退出的快捷键esc?

    opened by zd1990 1
Releases(2.3.5)
:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

vue-gallery ?? VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. E

Igor Ognichenko 409 May 16, 2021
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

David Desmaisons 44 Aug 29, 2020
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

David Desmaisons 44 Aug 29, 2020
Very simple lightbox plugin (without any dependencies) for Vuejs 🌅

Pure JS lightbox component for Vue.js Table of contents Demo Installation With NPM With a CDN Usage With an ES6 bundler (via NPM) Importing a componen

Dariusz Czajkowski 150 Jun 6, 2021
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast

v-dialogs · A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast Examples and Documentation Exp

Terry Zeng 123 Jun 3, 2021
A simple image / (YouTube) video lightbox component for Vue.js.

Vue It Bigger! A simple image / (YouTube) video lightbox component for Vue.js. Based on vue-image-lightbox. Click on the screenshot above for a demo.

 haiafara.ro 91 Jun 14, 2021
A Vue2 plugin for images show in gallery or carousel

v-gallery A Vue2 plugin for images show in gallery or carousel Demo、Document Explorer on English site 国内站点 If you think this project is helpful, pleas

Terry Zeng 63 Apr 29, 2021
Vue.js component for accessible modals

vue-accessible-modal Vue.js component for accessible modals. vue-accessible-modal Features Demo Installation Via NPM Via Yarn Initialization As a plug

Andrew 15 May 3, 2021
Simple and intuitive, highly customizable modal component for Vue.js.

Transform Vue.js 2.0+ component into modal with powerful layout and transition support

Yuqiao Chen 6 May 7, 2021
A lightweight, promise based alert, prompt and confirm dialog

Vuejs Dialog Plugin A lightweight, promise based alert, prompt and confirm dialog. Demo https://godofbrowser.github.io/vuejs-dialog/ Important updates

Emeke Ajeh 333 May 15, 2021
Simple lightbox component for Vue applications

Simple Image Lightbox for Vue.js Upgraded to support Vue 3 and still no dependencies required! Inspired by vue-pure-lightbox, however I needed a frame

Andrew McGrath 46 May 27, 2021
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

mirari 1.6k Jun 10, 2021
Promisify dialogs in Vue!

Guide & Demo | 2.x docs | 1.x docs Introduction Promisify dialogs! A typical and essential type of user interaction is dialogs. Dialogs are somehow si

Jingkun Hua 269 Jun 4, 2021
Vue modals with a single component

Vuedals VueJS (2.x) Plugin for multiple modals windows with a single component instance. DEMO View demo on jsFiddle What is this? A plugin to open sto

Javis V. Pérez 103 May 24, 2021