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',

代表文字前面的图标样式

效果图如下

相关推荐
小菜全6 分钟前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C9 分钟前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG12 分钟前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042716 分钟前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路19 分钟前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa20 分钟前
HTML和CSS学习
前端·css·学习·html
秋秋小事26 分钟前
React Hooks useContext
前端·javascript·react.js
Jinuss28 分钟前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#29 分钟前
百度前端社招面经二
前端
xcnn_30 分钟前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html