简介
- 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”