vue2实现弹窗的最小化和最大化

你可以使用 Vue.js 2 结合 CSS3 实现弹窗的最小化和最大化特效。具体步骤如下：

1. 在 Vue.js 的模板中，添加一个弹窗元素，并给它一个固定的宽度和高度。

<div class="modal" :class="{ minimized: isMinimized, maximized: isMaximized }">
  <div class="modal-header">
    <button @click="minimizeModal">_</button>
    <button @click="maximizeModal">[]</button>
    <button @click="closeModal">X</button>
  </div>
  <div class="modal-content">
    ...
  </div>
</div>

2. 在 Vue.js 的 data 中添加三个变量，分别用于表示弹窗的状态。

data() {
  return {
    isMinimized: false,
    isMaximized: false,
    isClosed: false
  }
}

3. 在 Vue.js 的 methods 中添加三个方法，分别用于最小化、最大化和关闭弹窗。例如：

methods: {
  minimizeModal() {
    this.isMinimized = true;
    this.isMaximized = false;
  },
  maximizeModal() {
    this.isMinimized = false;
    this.isMaximized = true;
  },
  closeModal() {
    this.isClosed = true;
  }
}

4. 在 CSS 中，添加两个样式类，分别用于实现弹窗的最小化和最大化特效。

.modal.minimized {
  height: 50px;
  transition: height 0.3s ease-in-out;
}
.modal.maximized {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

5. 最后，在弹窗的头部添加三个按钮，分别调用最小化、最大化和关闭弹窗的方法。

<div class="modal-header">
  <button @click="minimizeModal">_</button>
  <button @click="maximizeModal">[]</button>
  <button @click="closeModal">X</button>
</div>

这样，当用户点击最小化或最大化按钮时，弹窗就会平滑地缩小或放大，从而实现了弹窗的最小化和最大化特效。同时，当用户点击关闭按钮时，弹窗就会关闭。