代码:
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { open () { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', // MessageBox 的自定义类名 customClass: 'btn-cancle-right' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) } } } </script> // 在单页面使用不可以加scoped限制,否则不生效 <style lang="scss"> /* 可以把这个btn-cancle-right类放置到公共的样式文件中, 这样就可以只定义一次,多次重复使用啦 */ .btn-cancle-right { .el-message-box__btns { .el-button:nth-child(1) { float: right; } .el-button:nth-child(2) { margin-right: 10px; background-color: #2d8cf0; border-color: #2d8cf0; } } } </style>
图示:
标签:el,right,prompt,取消,cancle,message,btn From: https://www.cnblogs.com/huguo/p/17046634.html