elementui中drawer抽屉右上角的关闭图标换成普通按钮

在 Element UI 中，el-drawer 组件默认在右上角有一个关闭图标（X）。如果你想替换这个默认的关闭图标为一个普通按钮，可以通过以下步骤来实现：

1. 隐藏默认的关闭图标。
2. 在 el-drawer 的标题区域自定义一个按钮。

示例代码

以下是一个完整的示例，展示了如何在 el-drawer 中自定义关闭按钮：

html
复制代码
<template>
  <div>
    <el-button type="primary" @click="drawerVisible = true">Open Drawer</el-button>
    <el-drawer
      title="Custom Close Button"
      :visible.sync="drawerVisible"
      :show-close="false"
      direction="rtl"
    >
      <template #title>
        <span>Custom Close Button</span>
        <el-button
          style="position: absolute; right: 16px; top: 16px;"
          size="mini"
          @click="drawerVisible = false"
        >Close</el-button>
      </template>
      <p>Drawer Content</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
    };
  },
};
</script>

<style>
/* 如果需要，可以在此处添加样式 */
</style>

解释

1. 隐藏默认关闭图标：

   • 使用 :show-close="false" 属性来隐藏 el-drawer 默认的关闭图标。

2. 自定义关闭按钮：

   • 使用 #title 插槽来自定义 el-drawer 的标题区域。在这个插槽中，除了标题文字，还放置了一个自定义的关闭按钮。
   • 自定义的关闭按钮是一个 el-button，位置通过 style 属性设置（绝对定位到右上角）。

3. Drawer 可见性：

   • :visible.sync="drawerVisible" 控制 el-drawer 的可见性。

总结

通过隐藏 el-drawer 的默认关闭图标，并在标题区域插入自定义按钮，可以实现右上角的关闭图标替换为普通按钮的效果。这种方法可以灵活地添加更多自定义内容和样式到标题区域。