Message 全局提醒

概述

轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

使用指南

在.vue中引入组件

<script>
    import iMessage from 'iview-mpvue/dist/components/message/message'
    export default {
        components: {
            'i-message': iMessage
        }  
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/message/style/css'

示例

<div style="margin-top: 100px">
    <i-button type="ghost" @click="handleDefault">默认提醒</i-button>
    <i-button type="ghost" @click="handleSuccess">成功提醒</i-button>
    <i-button type="ghost" @click="handleWarning">警告提醒</i-button>
    <i-button type="ghost" @click="handleError">错误提醒</i-button>
    <i-button type="ghost" @click="handleDuration">自定义持续时间</i-button>
</div>
<i-message ref="message" />
<script>
import { $Message } from 'iview-mpvue/dist/components/base/index'
export default {
  ...
  methods: {
      handleDefault() {
          $Message(this, {
              content: '这是一条普通提醒'
          })
      },
      handleSuccess () {
          $Message(this, {
              content: '这是一条成功提醒',
              type: 'success'
          })
      },
      handleWarning () {
          $Message(this, {
              content: '这是一条警告提醒',
            type: 'warning'
          })
      },
      handleError () {
          $Message(this, {
              content: '这是一条错误提醒',
              type: 'error'
          })
      },
      handleDuration () {
          $Message(this, {
              content: '我将在 5 秒后消失',
              duration: 5
          })
      }
  }
}
</script>

API

$Message properties

PreviousModal 对话框NextSpin 加载中

Last updated