v-for 元素全屏请教

[yzhang921]

你好, 请问有办法对下面这种通过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;
            },

[mirari]

vue的某个版本以后修改fullscreen属性的触发方式可能会被浏览器判定为非同步操作从而阻止，所以目前只能尽量使用直接执行方法的形式来调用全屏api。 通过refs来获取当前组件的fullscreen子组件并执行show或者toggle方法。 v-for这种情况你需要在循环里生成不同的ref，然后在回调里定位到响应的fullscreen组件后执行方法。

[yzhang921]

嗯, 通过动态的给循环item生成ref, toggle方法生效了, 但是又遇到了新的问题, 非fullscreen组件全屏, 周边的系统菜单都还在, 是还需要添加css引用吗? 我的vue版本"vue": "^2.5.16",

[mirari]

没看懂……非fullscree组件是啥？系统菜单是指什么

[yzhang921]

我的理解全屏应该只显示里面的内容才对

                                    <fullscreen :ref="item.i">
                                        <widget :widgetId="item.widgetId" :w="item.version"></widget>
                                    </fullscreen>

下面是实际的全屏效果, 左边和上面是非<fullscreen 里面的内容, 这种情况是css冲突了吗?

[mirari]

正常情况下是应该只显示里面的内容，如果能看到左侧和上面的元素，说明被全屏的是body元素而不是全屏组件。需要看下你的方法代码是怎么写的。

[yzhang921]

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);
            },

[mirari]

https://codepen.io/mirari/pen/QrxZLo 我试了下没有发现问题啊

[yzhang921]

好的, 非常感谢你的支持, 我在看看是不是我的项目样式里面出了什么问题