ElementUI Notification组件添加点击事件与回调示例

"在Element UI框架中，Notification组件是一个用于显示全局提示信息的模块，它通常用于告知用户一些重要信息或者操作结果。本实例主要探讨如何在Notification组件中添加点击事件，并传递参数，以及实现按一定时间顺序弹出消息通知。此外，还提及了Vue+Element UI中如何在表格中通过点击单元格触发事件并弹出对话框的相关知识。" 在Element UI中，`Notification`组件提供了一种便捷的方式向用户展示临时的通知信息。默认情况下，当用户创建一个Notification时，它会在一段时间后自动关闭。要为`Notification`添加点击事件，可以利用`onClick`回调函数。例如，`handleClick`函数中展示了如何创建一个带有点击事件的通知： ```javascript handleClick() { let telNo = '1111'; let message = '22222'; let _this = this; // 保存当前作用域引用 this.$notify({ title: '通知消息', position: 'bottom-right', dangerouslyUseHTMLString: true, message: `<p style="cursor:pointer;">号码：<i>${telNo}</i></p>`, // 使用HTML字符串，设置鼠标指针为手型 duration: 0, // 不自动关闭 type: 'warning', // 设置通知类型为警告 onClick() { _this.defineCallBack(message); // 点击时调用自定义回调，传入message参数 } }); } ``` `onClick`回调函数接收一个参数，可以在此处执行自定义操作，例如调用`defineCallBack(message)`。这个回调函数可以在用户点击Notification时执行特定逻辑，如日志记录、数据处理或触发其他UI交互。 如果需要按照特定顺序依次弹出多个通知，可以使用`setTimeout`来延迟创建通知，如下所示： ```javascript notifyByOrder() { let data = ['aaaa', 'bbbbb', 'ccccc']; for (let i = 0; i < data.length; i++) { let item = data[i]; setTimeout(() => { this.$notify({ title: `通知${i + 1}`, position: 'bottom-right', message: `通知内容${item}`, duration: 0, type: 'warning' }); }, i * 5000); // 每个通知之间延迟的时间 } } ``` 在这个示例中，`notifyByOrder`函数会依次弹出三个通知，每个通知间隔5秒。 另外，对于Vue+Element UI中的表格，可以通过自定义列模板和监听事件来实现点击单元格触发事件。Element UI的`<el-table>`组件提供了`row-click`事件，可以监听到用户点击行的操作。然而，对于单元格级别的点击事件，需要自定义列模板并绑定点击事件。以下是一个简单的例子： ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <el-icon name="time" @click="handleCellClick(scope.row, 'date')"></el-icon> </template> </el-table-column> </el-table> ``` 在这个例子中，我们监听了`el-icon`元素的点击事件，并将点击事件绑定到`handleCellClick`方法，这样就可以根据需要弹出对话框或其他操作。 总结来说，本实例主要涉及Element UI的`Notification`组件的使用，包括添加点击事件、传递参数、按顺序弹出通知，以及在表格中通过点击单元格触发事件。通过这些知识，开发者可以构建更丰富的交互式用户界面。