如何使用Vue和Element-UI实现弹窗提示功能

1. 简介

弹窗提示功能在前端开发中是比较常见的功能，而Vue作为一种流行的前端框架，结合Element-UI组件库实现弹窗提示功能十分简单。本文将介绍如何使用Vue和Element-UI实现弹窗提示功能。

2. 安装Element-UI

在使用Element-UI之前，需要先安装Element-UI。可以通过npm来安装Element-UI，具体步骤如下：

npm i element-ui -S

安装完成后，在vue项目中引入Element-UI：

import Vue from 'vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

注意：还需要在vue.config.js文件中配置按需引入Element-UI，以减小项目体积。

3. 实现弹窗提示功能

3.1 基本用法

在Vue中，可以通过使用ElMessageBox组件来实现弹窗提示功能。ElMessageBox组件支持多种弹窗类型，包括alert、confirm、prompt等。代码示例如下：

this.\$confirm('确认删除该项？', '提示', {

  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 用户点击确定按钮执行的操作
}).catch(() => {
  // 用户点击取消按钮执行的操作
});

上面代码中，调用了confirm弹窗类型，并设置了弹窗的提示文字、标题、确定按钮和取消按钮的文字、以及弹窗类型。当用户点击确定按钮时，会执行then函数中的代码，当用户点击取消按钮时，会执行catch函数中的代码。

3.2 抽象封装

由于在实际开发过程中会有多处使用到弹窗提示功能，为了减少代码冗余，可以将ElMessageBox组件进行抽象封装。例如，封装一个名为popup的全局函数，代码如下：

// main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.prototype.\$popup = function(msg, type, confirmFn, cancelFn) {
    this.\$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: type || 'warning'
    }).then(() => {
        confirmFn && confirmFn()
    }).catch(() => {
        cancelFn && cancelFn()
    });
};
new Vue({
  render: h => h(App),
}).$mount('#app')

上述代码中，使用Vue.prototype给Vue添加了一个名为popup的全局函数，该函数接收四个参数：msg（弹窗提示信息）、type（弹窗类型）、confirmFn（确定回调函数）和cancelFn（取消回调函数）

抽象封装后，就可以在Vue组件中直接调用popup函数，而不用重复编写代码，例如：

this.\$popup('确认删除该项？', null, () => {

  // 用户点击确定按钮执行的操作
}, () => {
  // 用户点击取消按钮执行的操作
});

上述代码中，传入了弹窗提示信息、弹窗类型为null、确定回调函数和取消回调函数。当用户点击确定按钮时，会执行confirmFn函数中的代码，当用户点击取消按钮时，会执行cancelFn函数中的代码。

4. 结束语

本文介绍了如何使用Vue和Element-UI实现弹窗提示功能，并对ElMessageBox组件进行了抽象封装，提高了代码复用性。开发者可以根据实际需求调用popup函数，实现弹窗提示功能。