Element UI三十六Notification通知

简介

• Element注册了$notify方法用于显示悬浮在页面角落的通知提醒消息，是适用性广泛的通知栏。

基础用法

• 该方法接收一个options对象，通过添加title和message字段可设置通知的标题和正文。默认经过一段时间后通知栏会自动关闭，通过duration字段可控制关闭的时间间隔，如设为0则表示不自动关闭，默认为4500ms。

    <template>
        <div>
            <el-button plain @click="open1">可自动关闭</el-button>
            <el-button plain @click="open2">不会自动关闭</el-button>
        </div>
    </template>
    
<script>
  export default {
    methods: {
            open1(){
                const h=this.$createElement;
                this.$notify(
                    {
                        title:'标题名称',
                        message:h('i',{style:'color:tral'},'这是提示文案')
                    }
                );
            },
            open2(){
                this.$notify(
                    {
                        title:'标题名称',
                        message:'这是一条不会自动关闭的消息',
                        duration:0
                    }
                );
            },
    }
  }
</script>

• 

带有倾向性

• 通过将type字段设置为success、warning、ingo或error可使通知带icon，从而表示不同状态的通知消息。或者也可以通过类似$notify.info的方法来展示不同类型通知。
• 

自定义弹出位置

• 通过将position字段定义为top-right（默认）,top-left,bottom-right或bottom-left可自定义通知的弹出位置。

带有偏移

• 通过offset字段可使弹框距离屏幕边缘（默认是屏幕顶部）偏移一段距离。注意：在同一时刻，所有notify实例应该具有同一偏移量(不理解)。下例偏移量为100，可看到弹框与窗口顶部确实拉开了距离：
• 

隐藏关闭按钮

• 通过将showClose字段设置为false即可隐藏关闭按钮，取消手动关闭，只能等待自动关闭。
• 

全局方法

• Element注册了全局方法$notify，因此可以直接在Vue实例中调用。

单独引用

//单独引入Notification
import {Notification} from 'element-ui';
//调用方法
Notification(options);
//调用某种type的方法
Notification.success(options);
//调用Notification或this.$notify都会返回当前Notification实例，如果需要手动关闭实例：
Notification.close(); or this.$notify().close();
//手动关闭所有实例
Notification.closeAll();

• options包含字段：

• 

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”