element-ui的dialog组件怎么使用fullscreen全屏功能

Question

想实现点击可开启或关闭全屏的功能：

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>  
<el-dialog fullscreen :visible.sync="dialogVisible ">
    <el-button class="fullscreen">
      <i class="full"></i><p>全屏显示</p>
    </el-button>
    <p>{{testInfo}}</p>
</el-dialog>

刚学的vue，element-ui也是初学阶段，求大神教一下组件的Attributes怎么用

Answer 1

其实问题的关键在于，fullscreen用api的话，它必须是事件驱动的，啥意思呢，就是你必须点一下才行，就像你看直播的全屏，所以你这种属性的写法，路子应该不对。

Answer 2

store = {
    isfullscreen: false
}

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>  
<el-dialog :fullscreen="isfullscreen" :visible.sync="dialogVisible ">
    <el-button class="fullscreen">
      <i class="full"></i><p>全屏显示</p>
    </el-button>
    <p>{{testInfo}}</p>
</el-dialog>

肯定要通过 getters 获取的, 我就不写了
思路就是定义全局变量啊, 点击进行 isfullscreen = !isfullscreen, 这样每个 dialog 都由这个变量控制全屏了, 但是每个dialog 都要写上 fullscreen属性值为isfullscreen