Vue js 元素 ui 对话框答案

【问题标题】：Vue js Element ui dialogVue js 元素 ui 对话框
【发布时间】：2021-01-06 04:49:42
【问题描述】：

如何设计 el-dialog 左上角关闭按钮？我想用我自己的关闭按钮来改变它。

有什么办法可以改吗？

例如。

<el-dialog
  title="Tips"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>My custom close button</span> # my close button left top corner.

</el-dialog>

【问题讨论】：

你想要this这样的东西吗？
@BoussadjraBrahim 不，我需要关闭文本插入 x 图标。
@BoussadjraBrahim 谢谢这是个好主意。但我需要关闭文本。没有办法做到这一点，一些打字稿或javascript技巧？
通常有些组件会提供slots来自定义某些部分的渲染，但这种情况下没有专门用来关闭的slot，element.eleme.io/#/en-US/component/dialog#slot
我可以建议使用纯 js 进行 DOM 操作，但这不是一个好习惯

标签： typescript vue.js vuejs2 vue-component element-ui

【解决方案1】：

我找到了。我只是对它做了一点小把戏。

这是一个棘手的方法。

el-icon-close:before{
  content: "Close";
}

codePen example

【讨论】：

【解决方案2】：

是的，有一个属性可以隐藏默认关闭按钮，之后，您可以添加自己的关闭按钮或任何样式

const app = new Vue({
  el: '#app',
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
        beforeClose(done) {
        this.dialogVisible = false;
      done();
    }
  }
})

.my-class {
    position: absolute;
    top: 15px;
    left: 10px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">

<body>
  <div id="app">
    <el-button @click="dialogVisible = true">Click</el-button>
    <!-- <el-dialog :visible.sync="dialogVisible"> -->
    <el-dialog :visible="dialogVisible" :before-close="beforeClose" :show-close="false">
    <span class="my-class"><el-button type="danger" round  @click="dialogVisible = false">Close</el-button></span>
    
     
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Save</el-button>
      </div>
    </el-dialog>
  </div>
</body>

你的 CSS

【讨论】：