html页自定义this.$message

HTML页面通常不直接涉及Vue.js中的`this.$message`，这是Vue框架中的一个通知组件，用于显示简单的消息提示。如果你想在HTML模板中自定义这个消息提示，你需要在对应的Vue组件中操作。在Vue组件里，你可以这样做：

<template>
  <button @click="showCustomMessage('这是一条自定义消息')">点击显示消息</button>
</template>

<script>
export default {
  methods: {
    showCustomMessage(message) {
      this.$message({
        message: message,
        type: 'success', // 可选类型如info, success, error等
        duration: 2000, // 消息停留时间，默认1500ms
      });
    }
  }
}
</script>

在这个例子中，当用户点击按钮时，会触发`showCustomMessage`方法，传入的自定义消息会被传递给`$message`并显示出来。

相关问题

this.$message.

this.$message是Vue.js中的一个组件，用于显示提示信息。它有几个属性可以控制提示的类型、文本居中显示、关闭按钮显示等。

引用的第一个内容提到了使用this.$createElement方法可以自定义显示文本的效果。此外，还可以通过设置dangerouslyUseHTMLString为true，解析文本内容中的HTML标签。

引用的第二个内容提到了在Vue项目中引用公共方法的使用方法。通过this.common.login()可以调用一个名为login的公共方法。这个方法里可以放置一段简单的代码，例如console.log('这是一段代码')。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [this.$message入门使用](https://blog.csdn.net/qq_40765784/article/details/125414501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法](https://download.csdn.net/download/weixin_38610277/13127997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue this.$confirm 自定义三个按钮 代码

可以使用Element UI的Dialog组件来自定义三个按钮的confirm弹窗。

首先，在需要使用confirm弹窗的组件中引入Dialog组件和Button组件：

import { Dialog, Button } from 'element-ui';

然后，在该组件的methods中定义一个方法，用于自定义confirm弹窗：

methods: {
  myConfirm() {
    Dialog.confirm({
      title: '提示',
      message: '确定要执行该操作吗？',
      customClass: 'my-confirm',
      showCancelButton: true,
      showConfirmButton: false,
      showClose: false,
      cancelButtonText: '取消',
      cancelButtonClass: 'my-cancel-button',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      beforeClose: (action, instance, done) => {
        if (action === 'cancel') {
          done();
        } else {
          // 执行确认操作
          done();
        }
      }
    });
  }
}

在myConfirm方法中，使用Dialog.confirm方法来创建一个confirm弹窗。通过传递一些参数，可以自定义弹窗的样式和功能：

- title：弹窗标题
- message：弹窗内容
- customClass：自定义弹窗类名
- showCancelButton：是否显示取消按钮
- showConfirmButton：是否显示确认按钮
- showClose：是否显示关闭按钮
- cancelButtonText：取消按钮文本
- cancelButtonClass：自定义取消按钮类名
- closeOnClickModal：是否允许点击弹窗外部关闭弹窗
- closeOnPressEscape：是否允许按下ESC键关闭弹窗
- beforeClose：弹窗关闭前的回调函数，可以在其中执行确认操作

在beforeClose回调函数中，可以根据用户操作的结果来执行相应的操作，例如调用API接口执行删除操作。

最后，在页面中使用Button组件来触发myConfirm方法即可：

<template>
  <Button type="warning" @click="myConfirm">删除</Button>
</template>

这样就可以自定义三个按钮的confirm弹窗了。