element-plus 按钮控制弹窗

Element Plus 中的 `ElMessageBox` 组件通常用于显示警告、确认等对话框，但如果你想通过按钮来动态控制其内容，包括插入输入框，可以利用 Vue 的响应式特性以及 Element Plus 提供的 API。以下是一个基本示例：

<template>
  <el-button @click="showCustomMessageBox">点击显示自定义弹窗</el-button>
  <el-message-box v-if="show" :custom-class="customClass" :show.sync="show" @on-ok="handleOk">
    <template #title>自定义标题</template>
    <template #message>
      <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    </template>
  </el-message-box>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      show: false,
      customClass: '',
    };
  },
  methods: {
    showCustomMessageBox() {
      this.show = true;
    },
    handleOk() {
      // 在这里处理输入框的值
      console.log('Input value:', this.inputValue);
      // 关闭弹窗
      this.show = false;
    },
  },
};
</script>

在这个例子中，我们创建了一个点击按钮后显示自定义 `ElMessageBox` 的功能。`v-model` 绑定了一个 `inputValue` 变量，当用户在输入框中输入时，`inputValue` 的值会被更新。`@on-ok` 事件会在用户点击确认按钮时触发，你可以在这里处理输入框的内容并关闭弹窗。