前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目element-ui消息提示框及确认弹框封装

vue项目element-ui消息提示框及确认弹框封装

作者头像
薛定喵君
发布2020-04-08 11:27:42
3.7K0
发布2020-04-08 11:27:42
举报
文章被收录于专栏:薛定喵君薛定喵君

记一下element-ui消息提示框及确认弹框的封装

# utils下新建封装文件

src/utils/confirm.js

代码语言:javascript
复制
import { MessageBox, Message } from "element-ui";

/**
 * @author 封装 element-ui 弹框
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleConfirm(text = "确定执行此操作吗?", type = "danger") {
  return MessageBox.confirm(text, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type
  });
}

/**
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleAlert(text = "操作成功", type = "success") {
  return Message({
    showClose: true,
    message: text,
    type: type
  });
}

# 页面vue文件中引用

代码语言:javascript
复制
import { handleConfirm, handleAlert } from '@/utils/confirm'
export default {
  data() {
    return {
      ...
    };
  },
  methods: {
    ...
    handleClose(formName) {
      handleConfirm('系统将不会保存您所做的更改,确定要离开吗?').then(res => {
        ...
      }).catch(err => { 
        console.log('err', err)
      })
    },
    delConfirm(formName) {
      ...
      handleAlert('删除成功')
      ...
    }
  },
  ...
}

# 示例效果

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-04-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # utils下新建封装文件
  • # 页面vue文件中引用
  • # 示例效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档