Comments (12)
Do you mean the act of pressing esc to exit fullscreen? This is controlled by the browser.
Only the pageOnly
option that is automatically enabled when the browser does not support the fullscreen api simulates this action.
from vue-fullscreen.
Yes, when pageOnly is enabled.
Sorry for not making it clear.
from vue-fullscreen.
I would like to know what the exact behavior of the conflict is like. The binding and unbinding of event listeners are both passed specific function, they shouldn't affect other listener behavior.
const keypressCallback = (e) => {
if (e.key === 'Escape') {
document.removeEventListener('keyup', keypressCallback)
this.exit()
}
}
document.removeEventListener('keyup', keypressCallback)
document.addEventListener('keyup', keypressCallback)
from vue-fullscreen.
If I also have a dialog with [Escape] key binding inside this fullscreen content.
from vue-fullscreen.
If you don't use pageOnly
, this event listener may also trigger the browser to exit the fullscreen, maybe you can use e.stopPropagation
to stop the event from bubbling.
from vue-fullscreen.
In my case, I may have other teleport content such as el-dialog which also enable key escape to close dialog.
And that's the conflict is.
So, I would rather pass a prop to disable esc event listeners, and add a button to call exit manually.
<fullscreen ref="contextRef" v-model="isFullscreen" :teleport="true" :page-only="true" :close-on-press-escape="false">
<button @click="() => contextRef.exit()" />
......
</fullscreen>
from vue-fullscreen.
If you don't use pageOnly
, does the full screen exit when you press Esc button in a dialog?
Adding such an option would become confusing and difficult to describe, since it doesn't actually prevent the browser from acting by default.
from vue-fullscreen.
Whether by setting pageOnly
or not, it always exit when press Esc in a dialog.
from vue-fullscreen.
So adding this option doesn't completely solve the problem, because the browser's behavior can't be prevented.
from vue-fullscreen.
Yeah, I'm aware of that we can't change the behavior in browser's fullscreen, but we can control it when pageOnly
is enabled.
This feature only needed in rare cases. But it still conflict with other components that has Escape key bindings.
Thanks for responding, if there is still a no go, I will close this issue.
from vue-fullscreen.
You can use this to avoid triggering the listener event on the document.
document.addEventListener("keyup", (e) => {
if (e.key === "Escape") {
e.stopImmediatePropagation();
}
});
from vue-fullscreen.
Thanks, I will apply this instead.
from vue-fullscreen.
Related Issues (20)
- TypeError: this.$refs.fullscreen.toggle is not a function HOT 7
- 建议把点击就退出的功能在option中加一个开关 HOT 2
- Compile vue-fullscreen with application HOT 6
- iPhone Full Screen doesnot work HOT 2
- Compatibility with Jest HOT 2
- Are there plans to support VUE3 HOT 9
- window.onscroll does not work in fullscreen mode HOT 1
- 全屏下的input聚焦输入时会退出全屏怎么处理 HOT 2
- Failed when publish HOT 1
- antv x6的拖拽wrapper和 elementui 的message弹框依旧会被盖住哦 HOT 3
- 全屏元素含iframe时,teleport设置为啥都有bug HOT 6
- Component does not destroy its childrem when Unmount HOT 1
- vue 转 app 返回时会退出全屏 HOT 1
- Retain fullscreen on redirect HOT 2
- Failed to execute 'insertBefore' on 'Node': The new child element contains the parent HOT 2
- Do not work on iOS HOT 1
- 如何快速给element-ui的组件添加右上角全屏显示图标按钮和功能?
- vue3注册插件时报错 HOT 2
- Vue3.main.js 组件注册,抛出error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-fullscreen.