如何利用vue和Element-plus实现消息通知和弹窗提示

如何利用vue和Element-plus实现消息通知和弹窗提示

Vue 是一款流行的前端框架，而 Element-plus 是基于 Vue 2.0 的组件库，可以帮助我们更快速地开发网站。在实际项目中，消息通知和弹窗提示是必不可少的功能，本文将介绍如何利用 vue 和 Element-plus 实现这些功能。

一、在项目中引入 Element-plus

首先，我们需要在项目中引入 Element-plus。在项目的入口文件 main.js 中，我们可以通过以下代码导入 Element-plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

在上面代码中，我们将 Element-plus 作为 Vue 插件使用，这样我们就可以在 Vue 的组件中使用 Element-plus 的组件了。同时，我们也需要在项目的 package.json 中添加 Element-plus 的依赖：

"dependencies": {
  "vue": "^2.6.12",
  "element-plus": "^1.0.2-beta.48"
}

二、使用 Message 组件实现消息通知

在 Element-plus 中，有一个名为 Message 的组件，可以用来实现消息通知。我们可以通过以下代码在项目中使用 Message 组件：

import { createApp } from 'vue'
import { ElMessage } from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$message = ElMessage
app.mount('#app')

上面的代码中，我们通过 app.config.globalProperties.$message 的方式在全局注册了 ElMessage 组件，并将其作为 $message 的属性。这样，我们就可以在项目的任何组件中通过 this.$message 的方式调用 Message 组件了。例如：

this.$message({
  message: '这是一条消息提示',
  type: 'success'
})

在上面的代码中，我们通过 this.$message 的方式调用了 Message 组件，并将它的属性 message 设置为“这是一条消息提示”，type 设置为“success”。这样，我们就可以看到页面上出现了一条 success 类型的消息提示。

2.1 Message 组件属性介绍

Message 组件有多个属性可以设置，下面我们来介绍一下常用的属性：

- message：消息提示文本内容。

- type：消息提示类型，可选值有 success、warning、info、error 等。

- duration：消息提示持续时间，单位是毫秒。

- showClose：是否显示关闭按钮，可选值为 true 或 false。

- center：是否居中显示，可选值为 true 或 false。

例如，我们可以通过以下代码来设置 Message 组件的属性：

this.$message({
  message: '这是一条消息提示',
  type: 'warning',
  duration: 2000,
  showClose: true,
  center: true
})

三、使用 MessageBox 组件实现弹窗提示

在 Element-plus 中，有一个名为 MessageBox 的组件，可以用来实现弹窗提示。我们可以通过以下代码在项目中使用 MessageBox 组件：

import { createApp } from 'vue'
import { ElMessageBox } from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$msgbox = ElMessageBox
app.mount('#app')

同样的，我们也是通过在全局注册 ElMessageBox 组件的方式来使用它。通过 app.config.globalProperties.$msgbox 的方式，我们可以在全局创建 $msgbox 属性，这样我们就能够在项目的任何组件中通过 this.$msgbox 的方式调用 MessageBox 组件了。例如：

this.$msgbox.confirm('确定要删除吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.deleteItem()
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除操作'
  })
})

在上面的代码中，我们通过 this.$msgbox.confirm 的方式调用了 MessageBox 的 confirm 方法，其中 '确定要删除吗？' 是弹窗的内容，'提示' 是弹窗的标题，confirmButtonText 和 cancelButtonText 分别是弹窗中“确定”和“取消”按钮的文本，type 是弹窗的类型。通过 then 方法和 catch 方法，我们可以处理用户的确认和取消操作。

3.1 MessageBox 组件方法介绍

除了上面的 confirm 方法，MessageBox 组件还有其他方法可以使用。下面我们来介绍一下常用的方法。

- alert(content, title, options)：弹出一个 alert 弹窗，其中 content 是弹窗内容，title 是弹窗标题，options 是弹窗的其他选项，比如 type、confirmButtonText、showClose 等。

- confirm(content, title, options)：弹出一个 confirm 弹窗，与 alert 方法类似。

- prompt(content, title, options)：弹出一个 prompt 弹窗，其中可以让用户输入文本，与 alert 和 confirm 方法类似。

四、小结

在本文中，我们介绍了如何利用 vue 和 Element-plus 实现消息通知和弹窗提示的功能。其中，我们使用了 Element-plus 的 Message 组件和 MessageBox 组件，分别用来实现消息通知和弹窗提示。在使用这些组件的过程中，我们也了解了它们的常用属性和方法。希望本文对你有所帮助。