Win Design

MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。如果需要弹出较为复杂的内容，请使用 Modal。

代码演示

基础用法

查看代码 < />

<template>
  <w-button @click="open">点击打开 Message Box</w-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

查看代码 < />

<template>
  <section>
      <w-button v-for="item in messageList"
        :type="item.type"
        :key="item.type"
        @click="messageShow(item)">{{item.label}}</w-button>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        messageList: [
          {
            label: '消息',
            type: 'info'
          },
          {
            label: '成功',
            type: 'success'
          },
          {
            label: '警告',
            type: 'warning'
          },
          {
            label: '错误',
            type: 'error'
          }
        ]
      }
    },
    methods: {
      open (item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: item.type
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

布局居中

使用 center 属性水平居中。

查看代码 < />

<template>
  <w-button @click="messageShow">文字居中</w-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

全局方法

Win-design 为 Vue.prototype 添加了全局方法 $confirm。因此在 vue instance 中可以采用本页面中的方式调用 MessageBox 。




 
$confirm(message, title, options)
// 或者
$confirm(message, options)

单独引用

单独引入 MessageBox ：



import { MessageBox } from 'win-design';

此时调用方法为 MessageBox.confirm，方法同上。

API

Options

参数 说明 类型 可选值 默认值
title MessageBox 标题 string — —
message MessageBox 消息正文内容 string — —
dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false
type 消息类型，用于显示图标 string success / info / warning / error —
iconClass 自定义图标的类名，会覆盖 type string — —
customClass MessageBox 的自定义类名 string — —
showClose MessageBox 是否显示右上角关闭按钮 boolean — true
showCancelButton 是否显示取消按钮 boolean — true
showConfirmButton 是否显示确定按钮 boolean — true
cancelButtonText 取消按钮的文本内容 string — 取消
confirmButtonText 确定按钮的文本内容 string — 确定
cancelButtonClass 取消按钮的自定义类名 string — —
confirmButtonClass 确定按钮的自定义类名 string — —
closeOnClickModal 是否可通过点击遮罩关闭 MessageBox boolean — true
closeOnPressEscape 是否可通过按下 ESC 键关闭 MessageBox boolean — true
center 是否居中布局 boolean — false
roundButton 是否使用圆角按钮 boolean — false

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 6/10/2020, 2:12:45 PM

← Modal 对话框 →