element ui 弹窗按钮自定义

Element UI 的 Dialog 组件默认提供了一个关闭按钮，如果想要自定义这个按钮的行为或外观，可以利用其可配置选项。以下是一些可能的做法：

1. **替换默认按钮**[^2]:
你可以通过覆盖`before-close`属性来实现自定义行为。这是一个示例，展示如何在点击关闭按钮时触发一个特定的回调函数：

   <el-dialog
     :visible.sync="dialogVisible"
     title="标题"
     :before-close="customClose"
   ></el-dialog>

然后在你的 Vue 实例中定义这个方法：

   methods: {
     customClose() {
       // 自定义逻辑，如保存更改或清理数据
       console.log('Custom close action');
     }
   }

2. **添加自定义按钮**[^1]:
如果你想完全替换关闭按钮，可以在 Dialog 内部添加一个自定义元素。例如，你可以添加一个外部链接或者使用 Vue 的 v-if 来显示自定义按钮：

   <template>
     <el-dialog :visible.sync="dialogVisible">
       ...
       <div slot="footer">
         <!-- 使用v-if动态插入关闭按钮 -->
         <button v-if="customCloseButton" @click="closeDialog">我的关闭按钮</button>
         <el-button type="primary" native-type="button" @click="$emit('update:visible', false)">原生关闭</el-button>
       </div>
   </template>

   <script>
   export default {
     data() {
       return { dialogVisible: true, customCloseButton: true };
     },
     methods: {
       closeDialog() {
         // 自定义关闭逻辑
       }
     }
   }
   </script>

请注意，确保你在适当的地方管理对话框的可见性，如上面的 `:visible.sync` 属性。