vue2 弹窗最小 最大化

你可以使用 Vue.js 的组件和事件来实现弹窗的最小化和最大化功能。具体实现方式如下：

1. 首先，在弹窗组件中添加最小化和最大化按钮，例如：

<template>
  <div class="dialog">
    <div class="title-bar">
      <div class="title">{{ title }}</div>
      <div class="buttons">
        <button @click="minimize">-</button>
        <button @click="maximize">+</button>
        <button @click="close">x</button>
      </div>
    </div>
    <div class="content">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

2. 在组件的 methods 中定义最小化和最大化的方法，例如：

methods: {
  minimize() {
    // 将弹窗最小化
    this.$emit('minimize');
  },
  maximize() {
    // 将弹窗最大化
    this.$emit('maximize');
  },
  close() {
    // 关闭弹窗
    this.$emit('close');
  }
}

3. 在组件的 props 中添加一个名为 `isMaximized` 的属性，用于控制弹窗的最大化状态。例如：

props: {
  isMaximized: {
    type: Boolean,
    default: false
  }
}

4. 在组件的样式中定义最大化状态的样式，例如：

.dialog.is-maximized {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5. 最后，在父组件中监听弹窗组件的最小化和最大化事件，并修改 `isMaximized` 属性的值。例如：

<template>
  <div>
    <my-dialog :is-maximized="isMaximized" @minimize="onMinimize" @maximize="onMaximize" @close="onClose"></my-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMaximized: false
    }
  },
  methods: {
    onMinimize() {
      this.isMaximized = false;
    },
    onMaximize() {
      this.isMaximized = true;
    },
    onClose() {
      // 关闭弹窗
    }
  }
}
</script>

这样，你就可以通过点击弹窗中的最小化和最大化按钮来控制弹窗的大小了。