Mist UI

# Message消息

# 基础用法

向 $message 中传递String类型

<template>
  <mist-button @click="showMessage">弹出消息</mist-button>
</template>
<script>
  export default {
    methods:{
      showMessage() {
        this.$message('显示消息哦！！！')
      },
    }
  };
</script>
Expand Copy

# 多种状态

可改变不同状态

可向 $message() 中传递Object类型，设置type改变状态。message是要传入的文本值。

<template>
  <mist-button @click="showMessage">消息</mist-button>
  <mist-button @click="showMessage2">成功</mist-button>
  <mist-button @click="showMessage3">警告</mist-button>
  <mist-button @click="showMessage4">失败</mist-button>
</template>
<script>
  export default {
    methods:{
      showMessage() {
        this.$message({
          message: '这里是消息！！！',
          type: 'info'
        })
      },
      showMessage2() {
        this.$message({
          message: '这里是成功消息！！！',
          type: 'success'
        })
      },
      showMessage3() {
        this.$message({
          message: '这里是警告消息！！！',
          type: 'warning'
        })
      },
      showMessage4() {
        this.$message({
          message: '这里是失败消息！！！',
          type: 'error'
        })
      },
    }
  };
</script>
Expand Copy

# 可以关闭

设置是否开启关闭按钮

默认设置中，Message的关闭按钮是false，若要开启使用showClose字段。

<template>
  <mist-button @click="showMessage">消息</mist-button>
  <mist-button @click="showMessage2">成功</mist-button>
</template>
<script>
  export default {
    methods:{
      showMessage() {
        this.$message({
          message: '这里是可关闭消息！！！',
          showClose: true
        })
      },
      showMessage2() {
        this.$message({
          message: '这里是可关闭消息！！！',
          showClose: true,
          type: 'success'
        })
      },
    }
  };
</script>
Expand Copy

# 关闭时间

可修改默认关闭时间

默认设置中，Message的自动关闭时间是2000ms，如果要修改使用duration字段。

<template>
  <mist-button @click="showMessage">消息</mist-button>
</template>
<script>
  export default {
    methods:{
      showMessage() {
        this.$message({
          message: '1000ms关闭消息！！！',
          duration: 1000
        })
      },
    }
  };
</script>
Expand Copy

# Options

参数 类型 可选值 默认值 说明
message string — — 消息文字
type string success/warning/info/error info 主题
showClose boolean — false 是否显示关闭按钮
duration number — 3000 显示时间, 毫秒。设为 0 则不会自动关闭
offset number — 20 Message 距离窗口顶部的偏移量

← Breadcrumb 面包屑 →