Notify 通知 pass 0.0.13+

基础用法

默认样式以及 type 属性

展开查看

<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">info</mg-button>
</template>
<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title:'这是标题',
          content: '这是一条默认通知',
        });
      },
      open2() {
        this.$notify({
          title:'success',
          content: '这是一条成功通知',
          type: 'success'
        });
      },

      open3() {
        this.$notify({
          title:'warning',
          content: '这是一条警告通知',
          type: 'warning'
        });
      },

      open4() {
        this.$notify({
          title: 'error',
          content: '这是一条错误通知',
          type: 'error'
        });
      }

      open5() {
        this.$notify({
          title: 'info',
          content: '这是一条消息通知',
          type: 'info'
        });
      }
    }
  }
</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

在 `setup` 中使用

<script>
  import { mgNotify } from 'mango-ui-vue/packages/notify'
  export default {
    setup(){
      mgNotify({
        title: '这是标题',
        content: '这是一条默认通知',
      })
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11

注意！

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

import { mgNotify } from 'mango-ui-vue'

其他样式

包括偏移，显示关闭按钮，弹出位置，以及自定义 icon 等
相对来说比较见名知意...这里就写在一起了

展开查看

<template>
  <mg-button :size="'mini'" @click="open1">偏移</mg-button>
  <mg-button :size="'mini'" @click="open2">可关闭</mg-button>
  <mg-button :size="'mini'" @click="open3">其他位置</mg-button>
  <mg-button :size="'mini'" @click="open4">8秒关闭</mg-button>
  <mg-button :size="'mini'" @click="open5">icon</mg-button>
</template>
<script>
  export default {
    methods: {
      open1() {
        this.$notify({ 
          content:'这是一条顶部偏移60px的通知',
          title:'偏移',
          gap:60 
        });
      },

      open2() {
        this.$notify({ 
          content:'这是一条可以关闭的通知',
          title:'可关闭',
          closable:true 
        });
      },

      open3() {
        this.$notify({ 
          content:'这是一条位于右下角的通知',
          title:'其他位置',
          position:'bottomRight' 
        });
      },

      open4() {
        this.$notify({ 
          content:'这是一条8秒后关闭的通知',
          title:'8s后关闭',
          duration:8000 
        });
      },

      open5() {
        this.$notify({ 
          content:'这是一条带有自定义icon通知',
          title:'自定义icon',
          icon:'<i class="mg-icon-info"></i>' 
        });
      }

    }
  }
</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

提示

使用 icon 属性时也可以配合 type 属性，或者行间样式实现不同颜色的 icon

Notify Attributes

参数	说明	类型	可选值	默认值
title	通知的标题	string	-	-
content	通知的内容	string	-	-
position	位置	string	topLeft/topRight/bottomLeft/bottomRight	topRight
type	类型	string	success/warning/error/info	-
icon	图标	string	-	-
duration	持续时间，ms	number	-	3500
gap	偏移量，px	number	-	-

Notify Event

事件	说明	回参
onClose	通知关闭时触发	-

# Notify 通知 pass 0.0.13+

# 基础用法

# 在 setup 中使用

# 其他样式