Mango UI

Message 消息提示 pass 0.0.13+

基础用法

展开查看
<template>
 <mg-button :size="'mini'" @click="open1">默认（info）</mg-button>
 <mg-button :size="'mini'" @click="open2">成功</mg-button>
 <mg-button :size="'mini'" @click="open3">警告</mg-button>
 <mg-button :size="'mini'" @click="open4">错误</mg-button>
 <mg-button :size="'mini'" @click="open5">8秒关闭</mg-button>
 <mg-button :size="'mini'" @click="open6">间隔</mg-button>
</template>
<script>
 export default {
   methods: {
     open1() {
       this.$message({
         message: '这是一条默认消息',
       });
     },
     open2() {
       this.$message({
         message: '这是一条成功的消息',
         type: 'success'
       });
     },

     open3() {
       this.$message({
         message: '这是一条警告的消息',
         type: 'warning'
       });
     },

     open4() {
       this.$message({
         message: '这是一条错误的消息',
         type: 'error'
       });
     }

     open5() {
       this.$message({
         message: '这是一条8秒后关闭的消息',
         duration:8,
       });
     }

     open6() {
       this.$message({
         message: '这是一条顶部间隔60px的消息',
         gap: 60
       });
     }
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在 setup 中使用


<script>
  import { mgMsg } from 'mango-ui-vue/packages/message'
  export default {
    setup(){
      mgMsg({
        message: 'this is msg',
      })
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11

注意！

如果仅仅打包 message 组件，请使用上面的引入方式
如果已经引入全量的依赖，也可以直接：

import { mgMsg } from 'mango-ui-vue'
1

Message Attributes

参数说明类型可选值默认值
message消息内容,必填string--
type提示类型stringinfo/success/warning/errorinfo
duration显示时长，单位秒，为0时不关闭number-3
gap顶部的间隔，单位pxnumber-20
zIndexz-index 的值number/string--

Message Event

事件说明回参
onClickmsg关闭时触发-