element中dialog弹窗支持全屏操作

代码可以直接复用

dialog弹窗支持全屏缩小功能

代码如下

<template>
  <div>
    <el-dialog title="" width="820" :fullscreen="isFullscreen" :visible.sync="showHistoryView" @close="closeDialog()" :close-on-click-modal="false">
      <div class="fullscreen" @click="toggleFullscreen" >
        <i v-if="!isFullscreen" class="el-icon-full-screen"></i>
        <i v-else class="el-icon-bottom-left"></i>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'fillHistoryView',
  data() {
    return {
      isFullscreen: false,
    }
  },
  methods: {
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.$emit('modalClose')
    }
  }
}
</script>

<style lang="scss" scoped>
  .fullscreen {
    margin-bottom: 10px;
    text-align: right;
  }
</style>