mirari / vue-fullscreen Goto Github PK

建议把点击就退出的功能在option中加一个开关，我们的应用场景是不想点击就退出，建议加上一个开关。现在我没有办法，只好拿源代码下来修改了

Hi, I am testing on iPhone 8 software version 14.2 and it does not do anything. It works well on android devices.

this is my bug

Failed to execute 'insertBefore' on 'Node': The new child element contains the parent


(in promise) TypeError: fullscreen error
    at Object.eval (vue-fullscreen.min.js?5208:1:1)
    at new Promise (<anonymous>)
    at Object.request (vue-fullscreen.min.js?5208:1:1)
    at Object.request (vue-fullscreen.min.js?5208:1:1)
    at Object.toggle (vue-fullscreen.min.js?5208:1:1)
    at HTMLSpanElement.s [as _onClickFullScreen] (vue-fullscreen.min.js?5208:1:1)

mycode

<div class="sample-tutorial">


    <div class="excel-header">
      <span @click="importExcel(1)" class="btn">导入Excel</span>
      <input v-show="false" ref="fileRef" type="file" @change="fileChange" />
      <span @click="importExcel(2)" class="btn">导入JSON</span>
      <span
        class="btn"
        v-fullscreen.teleport="options"
        @click="$fullscreen.toggle()"
        >全屏</span
      >
    </div>

....

 options: {
        target: ".sample-tutorial",
        // callback(isFullscreen) {
        //   console.log(isFullscreen);
        // },
      },

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

vue 转 app 物理返回键会退出全屏

When using the library with Jest Tests in a project I always get a Jest encountered an unexpected token error.
I found several jest specific solutions but couldn't get it working.
e.g. https://forum.vuejs.org/t/vue-testing-with-jest-issues/105763 shows exatly the same problem I am having:

error:

    Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\Users\Ovatones\Desktop\files\dashboard\node_modules\vue-fullscreen\src\utils.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export function supportFullScreen() {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

jest.config.js

module.exports = {
  verbose: true,
  moduleFileExtensions: [
      "js",
      "json",
      "jsx",
      "vue"
  ],
  transform: {
      ".*\\.(vue)$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.jsx?$": "babel-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  collectCoverage: true,
  collectCoverageFrom: [
      "src/components/*.{js,vue}",
      "!**/node_modules/**"
  ],
  transformIgnorePatterns: ['/node_modules/(?!vue-fullscreen)'],
  coverageReporters: [
      "html",
      "text-summary"
  ],
}

Does someone has experience with vue-fullscreen in combination with Jest? or can point out to me how to vue-fullscreen could be adjusted to be compatible with Jest?

Hey @mirari I keep getting following error when running the package in a linux based system (even on a docker instance)
SyntaxError: Unexpected token 'const' at webpack:///~/vue-fullscreen/src/utils.js:2:0 <- index.js:291193

What could be the problem?

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.

At the version to Vue 3, when using $router.push('/path') the fullscreen component does not destroy its children components.

试了一下 live demo，发现在 ie11 下不能使用。
请问有办法修改后在 ie11 下用吗？

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)

The license on GitHub is MIT, while on NPM is ISC. Is this by design? If not, may I ask you to align the license, maybe to MIT for both, since it's the more popular choice?

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

Hey @mirari and @balping the full screen is going blank and only comes up after clicking on the blank screen. This has been experienced for 3rd slide :index=2. What could be the problem? Eagerly expecting your response. Thanks

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 ?

• Vue 3
• Nuxt
• iPad / iPhone

Using $fullscreen.toggle(); or v-fullscreen do not work.

How do I know the status of the fullscreen?

Hi, I got build error when run command "tarn run build" or "vue-cli-service build".
FYI, I created Vue project with typescript. Please help to resolve this issue

The authors have plans to support vue3 ?

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

export function extend () {
const extended = {}
var deep = false
var i = 0
const length = arguments.length

if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
deep = arguments[0]
i++
}

function merge (obj) {
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
extended[prop] = extend(true, extended[prop], obj[prop])
} else {
extended[prop] = obj[prop]
}
}
}
}

for (var i = 0; i < length; i++) {
var obj = arguments[i]
merge(obj)
}

return extended
}

When I try to use the component on the page, that has to be rendered on the server I get the error

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.

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.

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

What is the solution? Thanks!

as title, fullscreen closed once i navigate to other pages

https://codepen.io/mirari/pen/zYZpbEV
验证会退出全屏

TypeError: Cannot set properties of undefined (setting '$fullscreen')

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

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

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

如何快速给element-ui的组件添加右上角全屏显示图标按钮和功能？
谢谢
例如
el-card怎么添加你的组件实现

当全屏元素中有 iframe 嵌入页面时，设置 teleport 为啥都有问题。teleport 为 false 时 elementUI 的提示框看不到，teleport 为 true 时 iframe 中的 body 被删成空内容没了......

未全屏时：

全屏时：

Hi,

I am using vue-fullscreen for a form I created. Once a customer submits the form, he gets redirected to a new page (non vue application outside of the form). When redirecting, the browser automatically exits fullscreen. The only way I can achieve this is by going fullscreen manually by pressing F11 but the "F11 fullscreen" seems to be different from the Javascript fullscreen API.

I am pretty certain this is not a library bug or anything but rather some security feature inside the Javascript Fullscreen API. Anyone an idea on how to retain fullscreen between different pages? I am afraid this is not possible using Javascript Fullscreen API...

Regards,
Jordi

通过app.use(VueFullscreen)注册时报了这个错误

vue-fullscreen.min.js:1 Uncaught TypeError: Cannot set properties of undefined (setting '$fullscreen')
at Object.install (vue-fullscreen.min.js:1:6671)
at Object.use (runtime-core.esm-bundler.js:3752:18)
at main.ts:16:5

antvx6拖拽过程中生成的ghost样式和 elementui中的提示信息框依旧会被盖住，无论teleport被设置为true还是false。。。

Hello,

when i use window.onscroll in Fullscreen mode it doesn't work

example:

Add prop to remove listener of key esc.

Escape might conflict with other key bindings.

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

Hi,

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

How to fix this?

Thanks in advance!

How to reproduce:

vue init webpack fullscreen-test
cd fullscreen-test
npm install --save vue-fullscreen
npm run dev

Edit ./src/components/HelloWorld.vue

<template>
  <div class="hello">
    <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 {
  name: 'HelloWorld',
  methods: {
    toggle () {
      this.fullscreen = !this.fullscreen
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fullscreen: false
    }
  }
}
</script>

Research:

// Not working through vue-fullscreen recommended method
<button type="button" @click="toggle" >vue-fullscreen</button>

// Works with direct-called plain mozilla fulscreen-request
<button type="button" onclick="body.mozRequestFullScreen()" >onclick fullscreen</button>

// Works with plain mozilla fulscreen-request called from vuejs method
<button type="button" @click="full" >vue-method fullscreen</button>

methods: {
  toggle () {
    this.fullscreen = !this.fullscreen
  },
  full () {
    document.body.mozRequestFullScreen()
  }
}

Tested in Chrome, Fireox

你好, 请问有办法对下面这种通过v-for循环出来的组件进行全屏吗, 我按照教程通过事件加变量的方式全屏没有效果
https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

<grid-layout
        :layout="boardData.layout.data"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
>
    <grid-item class="grid-item" v-for="item in boardData.layout.data" :key="item.i"
               :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"
               @resized="item.version++">
        <div class="pull-right">
            <button type="button" class="btn btn-default btn-sm" @click="toogle(item)">
                <i class="fa fa-square-o"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm" @click="removeWidget(item)">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <fullscreen :fullscreen.sync="item.fullscreen">
            <widget :widgetId="item.widgetId" :w="item.version"></widget>
        </fullscreen>
    </grid-item>
</grid-layout>

import Fullscreen from "vue-fullscreen/src/component.vue"

methods: {
            toogle(item) {
                item.fullscreen = true;
            },

1. : Register a empty vue component for handle global event.

const EventBus = new Vue({
  name: 'EventBus',
});
Vue.set(Vue.prototype, '$bus', EventBus);

2. : Emit event from you desired component

this.$bus.$emit('fullScreen-toggle');

3. : Listen the event and cry

mounted() {
      this.$bus.$on('fullScreen-toggle', this.setFullScreen);
    },
    beforeDestroy() {
      this.$bus.$off('fullScreen-toggle');
    },
    methods: {
      setFullScreen() {
        this.$refs['fullscreen'].toggle();
      },
},

Another try with wrapped component ...

1. Register global component with method

const Test = new Vue({
methodes: {
    async startTest($vm = null) {
        $vm.$root.$children[0].setFullScreen();
    },
},
});

Vue.set(Vue.prototype, '$test', Test);

2 : Add this in #app component...

methods: {
      setFullScreen() {
        this.$refs['fullscreen'].toggle();
      },

3. call from another component and cry again ....

this.$test.startTest(this);

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:

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)

vue 2.5.2发现此问题
execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.