vue 實現組件全屏展示及退出

vue 實現組件全屏展示及退出

一、組件

采用 vue-fullscreen 組件

二、實現方式

<fullscreen ref="fullscreen" @change="fullscreenChange" background="#ffffff">
      <div style="position: relative;" class="div-main" ref="main_div">
        <Icon :type="!fullscreen? 'ios-expand' : 'ios-contract'" size="30" class="expand-icon" @click="toggle" />
        需要全屏展示的內容
      </div>
    </fullscreen>

詳細代碼示例：https://download.csdn.net/download/you199037/15562304

三、實現效果

 

 

四、備注

參考地址：

https://github.com/mirari/vue-fullscreen