vue element UI message消息提示添加按钮和点击事件

要在 Element UI 的 message 消息提示中添加按钮和点击事件，可以使用 Element UI 提供的 $message 方法，同时传入一个配置对象来实现。

以下是一个示例代码，创建一个带有按钮和点击事件的消息提示：

this.$message({
  message: '这是一条带有按钮和点击事件的消息',
  duration: 0,
  showClose: true,
  center: true,
  customClass: 'message-box',
  type: 'warning',
  offset: 100,
  dangerouslyUseHTMLString: true,
  iconClass: 'el-icon-warning',
  customClass: 'message-box',
  showCancelButton: true,
  cancelButtonText: '取消',
  confirmButtonText: '确定',
  callback: action => {
    if (action === 'confirm') {
      // 点击确定按钮
      console.log('点击了确定按钮')
    } else if (action === 'cancel') {
      // 点击取消按钮
      console.log('点击了取消按钮')
    }
  }
})

在这个示例中，我们使用了 Element UI 的 $message 方法来创建一个消息提示，同时传入一个配置对象。其中，我们设置了以下几个配置项：

- `message`：消息提示的内容。
- `duration`：消息提示的持续时间。这里设置为 0，表示该消息提示不会自动关闭，需要点击按钮才能关闭。
- `showClose`：是否显示关闭按钮。这里设置为 true，表示该消息提示会显示一个关闭按钮。
- `center`：是否居中显示。这里设置为 true，表示该消息提示会在屏幕中央显示。
- `customClass`：自定义样式类名。这里设置为 message-box，表示该消息提示会应用一个名为 message-box 的样式。
- `type`：消息提示的类型。这里设置为 warning，表示该消息提示是一个警告类型。
- `offset`：消息提示的偏移量。这里设置为 100，表示该消息提示会在垂直方向上向下偏移 100 像素。
- `dangerouslyUseHTMLString`：是否将 message 字段作为 HTML 片段处理。这里设置为 true，表示 message 字段可以包含 HTML 标签。
- `iconClass`：自定义图标类名。这里设置为 el-icon-warning，表示该消息提示会使用一个名为 el-icon-warning 的图标。
- `showCancelButton`：是否显示取消按钮。这里设置为 true，表示该消息提示会显示一个取消按钮。
- `cancelButtonText`：取消按钮的文本。这里设置为 取消。
- `confirmButtonText`：确定按钮的文本。这里设置为 确定。
- `callback`：按钮点击后的回调函数。该函数会接收一个参数 action，表示用户点击的按钮。如果 action 等于 confirm，表示用户点击了确定按钮；如果 action 等于 cancel，表示用户点击了取消按钮。

在回调函数中，我们可以根据用户点击的按钮执行相应的操作。在这个示例中，我们只是简单地在控制台输出了一条消息。你可以根据自己的需求来编写具体的逻辑。