mirari / vue-fullscreen Goto Github PK
View Code? Open in Web Editor NEWA simple Vue.js component for fullscreen
License: MIT License
A simple Vue.js component for fullscreen
License: MIT License
通过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
Hi,
this.$refs['fullscreen'].toggle()
is not working with iPad devices but works with Desktop and Tablets.
How to fix this?
Thanks in advance!
If i want to upload some files (inside fullscreen) - fullscreen instantly closes.
Can i prevent it?
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)
<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);
// },
},
antvx6拖拽过程中生成的ghost样式和 elementui中的提示信息框依旧会被盖住,无论teleport被设置为true还是false。。。
请问下怎么能替换全屏模式下的退出的快捷键esc?
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)
const EventBus = new Vue({
name: 'EventBus',
});
Vue.set(Vue.prototype, '$bus', EventBus);
this.$bus.$emit('fullScreen-toggle');
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 ...
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();
},
this.$test.startTest(this);
At the version to Vue 3, when using $router.push('/path') the fullscreen component does not destroy its children components.
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?
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)
Add prop to remove listener of key esc.
Escape might conflict with other key bindings.
试了一下 live demo,发现在 ie11 下不能使用。
请问有办法修改后在 ie11 下用吗?
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
}
Hi, I am testing on iPhone 8 software version 14.2 and it does not do anything. It works well on android devices.
建议把点击就退出的功能在option中加一个开关,我们的应用场景是不想点击就退出,建议加上一个开关。现在我没有办法,只好拿源代码下来修改了
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.
as title, fullscreen closed once i navigate to other pages
vue 2.5.2发现此问题
execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
在没有全屏之前,点击弹框,能操作弹框里面的表单内容。
全屏之后,最开始因为wrapper的层级太高,所以我把弹框的层级设置的比wrapper更高,弹框能出来了,但是却无法操作,鼠标点击的时候,只能点击全屏页面,无法点击全屏页面上面的那个弹框。
请问有其他方法能解决这个问题吗。
As stated in title, Bootstrap tooltip and popover not work when fullscreen? How to overcome this?
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
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
vue 转 app 物理返回键会退出全屏
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 ?
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?
The authors have plans to support vue3 ?
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)
你好, 请问有办法对下面这种通过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;
},
How do I know the status of the fullscreen?
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.
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>
// 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
Using $fullscreen.toggle();
or v-fullscreen
do not work.
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?
如何快速给element-ui的组件添加右上角全屏显示图标按钮和功能?
谢谢
例如
el-card怎么添加你的组件实现
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.