Comments (8)
vue的某个版本以后修改fullscreen属性的触发方式可能会被浏览器判定为非同步操作从而阻止,所以目前只能尽量使用直接执行方法的形式来调用全屏api。
通过refs来获取当前组件的fullscreen子组件并执行show或者toggle方法。
v-for这种情况你需要在循环里生成不同的ref,然后在回调里定位到响应的fullscreen组件后执行方法。
from vue-fullscreen.
嗯, 通过动态的给循环item生成ref, toggle方法生效了, 但是又遇到了新的问题, 非fullscreen组件全屏, 周边的系统菜单都还在, 是还需要添加css引用吗?
我的vue版本"vue": "^2.5.16",
from vue-fullscreen.
没看懂……非fullscree组件是啥?系统菜单是指什么
from vue-fullscreen.
我的理解全屏应该只显示里面的内容才对
<fullscreen :ref="item.i">
<widget :widgetId="item.widgetId" :w="item.version"></widget>
</fullscreen>
下面是实际的全屏效果, 左边和上面是非<fullscreen 里面的内容, 这种情况是css冲突了吗?
from vue-fullscreen.
正常情况下是应该只显示里面的内容,如果能看到左侧和上面的元素,说明被全屏的是body元素而不是全屏组件。需要看下你的方法代码是怎么写的。
from vue-fullscreen.
template
<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="box-tools pull-right">
<button type="button" class="btn btn-sm" @click="toggle(item)">
<i class="fa fa-square-o"></i>
</button>
<button type="button" class="btn btn-sm" @click="removeWidget(item)">
<i class="fa fa-times"></i>
</button>
</div>
<fullscreen :ref="item.i">
<widget :widgetId="item.widgetId" :w="item.version"></widget>
</fullscreen>
</grid-item>
methods: {
toggle(item) {
console.log(this.$refs[item.i])
this.$refs[item.i][0].toggle(true);
},
from vue-fullscreen.
https://codepen.io/mirari/pen/QrxZLo
我试了下没有发现问题啊
from vue-fullscreen.
好的, 非常感谢你的支持, 我在看看是不是我的项目样式里面出了什么问题
from vue-fullscreen.
Related Issues (20)
- Disabling popout close button HOT 1
- Fullscreen close when i navigate between pages.. HOT 7
- 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的组件添加右上角全屏显示图标按钮和功能?
- Feature request: exit manually HOT 12
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.