Vue2_弹出框简单放大缩小功能

一、效果图

 （放大）

（缩小）

二、实现过程

1、 在 dialog 中，利用 dialogFull ，来控制放大缩小

:fullscreen="dialogFull"

        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title" style="margin-left: 10px;">
              流程配置
            </span>
            <span
              class="avue-crud__dialog__menu"
              @click="dialogFull ? (dialogFull = false) : (dialogFull = true)"
            >
              <i class="el-icon-full-screen"></i>
            </span>
          </div>
        </template>

 2、在 data 中定义 dialogFull

dialogFull: false

3、在每次点击按钮打开弹框的时候，让弹框处于缩小状态

this.dialogFull = false;

 4、CSS样式

<style lang="scss">
.avue-crud__dialog__header {
  display: flex;
  justify-content: space-between;
}
.avue-crud__dialog__menu {
  margin-right: 3%;
  margin-top: 7px;
}
// screen 图标
.el-icon-full-screen {
  font-size: 16px;
  color: #fff;
}
</style>

三、基础代码（举例）

<template>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :fullscreen="dialogFulls"
  :before-close="handleClose"
>
<template slot="title">
          <span style="margin-left: 15px"> 采购详情 </span>
          <span @click="dialogFulls ? (dialogFulls = false) : (dialogFulls = true)">
            <i v-if="dialogFulls" class="el-icon-switch-button"></i>
            <i v-else class="el-icon-full-screen"></i>
          </span>
      </template>
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogFulls: false
      };
    },
    methods: {
     handleClose(){
      this.dialogVisible = false
     },
    }
  };
</script>

<style lang="scss" scoped>
.el-dialog .el-dialog__close {
  position: relative;
}
.el-icon-full-screen {
  position: absolute;
  right: 45px;
  top: 13px;
}
.el-icon-switch-button {
  position: absolute;
  right: 45px;
  top: 13px;
}
</style>