ElementUI之MessgageBox使用

xun-ming2024-03-04 20:53

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

代表文字前面的图标样式

效果图如下