Notification 组件提供通知功能
Element 注册了
$notify
方法,接收一个options
字面量参数在最简单的情况下,你可以设置
title
字段和message
字段,用于设置通知的标题和正文。默认情况下,经过一段时间后 Notification 组件会自动关闭,
但是通过设置
duration
,可以控制关闭的时间间隔,特别的是,如果设置为
0
,则不会自动关闭。注意:
duration
接收一个Number
,单位为毫秒,默认为4500
。
<template> <el-button plain @click="open1"> 可自动关闭 </el-button> <el-button plain @click="open2"> 不会自动关闭 </el-button> </template>
open1() { const h = this.$createElement; this.$notify({ title: '标题名称', message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案') }); }, open2() { this.$notify({ title: '提示', message: '这是一条不会自动关闭的消息', duration: 0 }); } }
效果:
以上是单个按钮实现,实现多个展示效果
<el-badge is-dot class="itemBadge"> <el-button @click="noticeList()" size="small">通知</el-button> </el-badge>
noticeList(){ let showTime = 1000; this.你的数据.forEach((item,index)=>{ window.setTimeout(() => { this.$notify({ title: '提示', message: '你要展示的数据', duration: 0 }); },showTime * index ) }) },
效果图