el-dialog右上角叉号替换

在 Vue 的 Element UI 组件库中，`el-dialog` 提供了一个默认的关闭按钮，通常位于右上角，看起来像一个叉号。如果你想自定义这个叉号或者替换它，可以利用 Vue 的模板编译能力和组件的特性来进行操作。

一种常见的方式是在你的组件模板里覆盖 `el-dialog` 的默认关闭按钮，例如：

<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false" <!-- 禁止默认点击模态层关闭 -->
    @close="handleClose"
    class="custom-dialog">
    <div slot="footer" class="dialog-footer">
      <button type="button" class="custom-close" @click="$refs.dialog.close()">关闭</button> <!-- 自定义关闭按钮 -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {
    'custom-close': { // 可能需要你自己定义这个按钮组件
      template: '<i class="el-icon-close"></i>' // 或者使用其他图标库的关闭图标
    }
  },
  methods: {
    handleClose() {
      // 关闭逻辑
    }
  }
}
</script>

<style scoped>
.custom-dialog .el-dialog__footer button {
  /* 样式定制，如颜色、字体等 */
}
</style>

在这个例子中，我们通过 `slot="footer"` 插槽添加了一个自定义的关闭按钮，并使用了 `@close` 事件监听关闭请求。如果你想用图标代替文字，可以在 `custom-close` 组件中替换 `icon-close` 类别的图标。