element UI message消息提示文本添加按钮和点击事件
时间: 2023-10-26 16:21:21 浏览: 190
要在 Element UI Message 中添加按钮和点击事件,可以使用 `Message()` 方法的 `options` 参数。
首先,定义一个对象来设置 `Message()` 的 `options`:
```javascript
const options = {
message: '这是一条消息',
type: 'success',
duration: 3000,
showClose: true,
customClass: 'message-box',
offset: 80,
onClose: function() {
console.log('消息关闭了')
}
}
```
然后,在 `options` 中添加一个 `type` 属性为 `'html'`,并在 `message` 属性中添加一个 HTML 按钮元素,绑定点击事件:
```javascript
options.type = 'html'
options.message = '<div>这是一条消息 <button id="myButton">点击</button></div>'
options.onClose = function() {
console.log('消息关闭了')
}
options.onCloseButtonClick = function() {
console.log('按钮被点击了')
}
```
注意:这里需要在 HTML 按钮元素上指定一个 ID,以便在 `options` 中绑定点击事件。
最后,使用 `Message()` 方法并传入 `options` 对象即可显示带有按钮的消息提示:
```javascript
Message(options)
```
完整代码示例:
```javascript
const options = {
message: '这是一条消息',
type: 'success',
duration: 3000,
showClose: true,
customClass: 'message-box',
offset: 80,
onClose: function() {
console.log('消息关闭了')
}
}
options.type = 'html'
options.message = '<div>这是一条消息 <button id="myButton">点击</button></div>'
options.onClose = function() {
console.log('消息关闭了')
}
options.onCloseButtonClick = function() {
console.log('按钮被点击了')
}
Message(options)
```
注意:在实际应用中,可以根据需要修改按钮的样式和点击事件。