vue弹出提示框

// 使用 Vue 和 Element UI 实现弹出提示框的示例代码

<template>
  <div id="app">
    <!-- 按钮触发弹出提示框 -->
    <el-button type="primary" @click="showAlert">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    // 定义显示提示框的方法
    showAlert() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    }
  }
}
</script>

<style>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个按钮，点击按钮会触发 showAlert 方法。

2. 脚本部分 (<script>):

   • methods 中定义了 showAlert 方法，使用了 this.$alert 来弹出一个提示框。
   • this.$alert 是 Element UI 提供的一个方法，用于创建一个带有标题和内容的提示框。
   • 当用户点击“确定”按钮后，会触发回调函数，并在控制台中输出操作类型（如 "confirm"）。

3. 样式部分 (<style>):

   • 这里可以添加自定义样式，根据需求调整提示框的外观。

确保你已经在项目中安装并引入了 Element UI 库，否则代码将无法正常运行。