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>