gpt4 book ai didi

typescript - Vue JS Element UI对话框

转载 作者:行者123 更新时间:2023-12-03 06:41:47 28 4
gpt4 key购买 nike

如何设计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>

最佳答案

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

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

关于typescript - Vue JS Element UI对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63969446/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com