ElementUI之MessgageBox使用

javascript 复制代码
<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('是否完成维修工单?', '提示', {
          distinguishCancelAndClose: true,
          cancelButtonClass:'el-button--danger',
          confirmButtonText: '确认',
          cancelButtonText: '否-异常填报',
          type: 'info'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      }
    }
  }
</script>
javascript 复制代码
cancelButtonClass:'el-button--danger',

代表取消按钮用单独的css样式

javascript 复制代码
 distinguishCancelAndClose: true,

代表取消和关闭两个事件可以单独控制

javascript 复制代码
 type: 'info',

代表文字前面的图标样式

效果图如下

相关推荐
dr李四维12 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_26 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~33 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ36 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z42 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式