ElementUI自定义el-dialog关闭按钮

	<el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" custom-class="close_class">
	
	</el-dialog>

	<style lang="less" scoped>
	/deep/ .close_class {
		.el-dialog__headerbtn {
			background: url('图片路径');
			background-size: cover;
		}
		.el-dialog__headerbtn i {
			font-size: 36px;
			visibility: hidden;
		}
	}
	</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-dialog 新增自定义按钮的方法是在 el-dialog 组件的 footer slot 中添加自定义按钮元素。在模板中,可以使用<span slot="footer" class="dialog-footer">来定义 footer slot。然后在该 slot 中添加需要的自定义按钮元素,例如使用<el-button>元素。在相关的方法中,可以定义按钮点击事件的处理逻辑。具体实现步骤如下: 1. 在 el-dialog 组件的模板中,找到<span slot="footer" class="dialog-footer">代码块。 2. 在该代码块中添加<el-button>元素来定义自定义按钮,可以通过设置不同的属性来实现不同的效果,比如设置 type 属性来定义按钮的样式类型,设置 @click 属性来定义按钮的点击事件。 3. 在相关的方法中,定义对应的按钮点击事件的处理逻辑,可以在方法中添加所需的业务逻辑代码。 4. 保存并运行代码,即可看到 el-dialog 新增了自定义按钮。 示例代码如下: <template> <el-dialog title="提示" width="30%" :before-close="closeDialog" @close="visibles" :close-on-click-modal="true" :visible.sync="menuVisible"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="cancellation">取消</el-button> <el-button type="primary" @click="menuVisible = false">确定</el-button> <!-- 自定义按钮 --> <el-button type="warning" @click="customAction">自定义按钮</el-button> </span> </el-dialog> </template> <script> export default { data() { return { menuVisible: false }; }, methods: { visibles() { // 可以添加其他逻辑 }, closeDialog(done) { // 可以添加其他逻辑 }, cancellation() { // 取消按钮的点击事件处理逻辑 }, customAction() { // 自定义按钮的点击事件处理逻辑 } } }; </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值