前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue+ts项目 封装element-ui的messagebox

vue+ts项目 封装element-ui的messagebox

作者头像
yangdongnan
发布2019-08-14 17:00:12
1.9K0
发布2019-08-14 17:00:12
举报
文章被收录于专栏:日常记录日常记录
场景

问题: 有一个在项目非常常用的确认弹框, 并且使用element-ui的 messageBox; 我们不想在每一业务中大量的复制那么多的代码, 解决办法: 封装一个函数调用,尽可能给出操作回调

代码
代码连接 github
代码语言:javascript
复制
import {MessageBox} from 'element-ui';
Vue.prototype.$msgbox = MessageBox;

//msgbox.ts

function msgbox(
	vm: any,
	title: string = '消息',
	text: string,
	smallText: string = '',
	isClose: boolean = false,
	callback?: any,
	success?: any,
	cancel?: any,
	smallStyle: string = 'color: #cacaca',
) {
	const h = vm.$createElement;
	vm.$msgbox({
		title: title,
		message: h('div', null, [
			h('p', null, text),
			h('span', {style: smallStyle}, smallText)
		]),
		// distinguishCancelAndClose: false,
		closeOnClickModal: false,
		closeOnPressEscape: false,
		showClose: isClose,
		showCancelButton: true,
		cancelButtonText: '取消',
		confirmButtonText: '移除',
		cancelButtonClass: 'msgbox-btn msgbox-float-r',
		confirmButtonClass: 'msgbox-btn msgbox-mr20',
		beforeClose: (action: any, instance: any, done: any) => {
			if (action === 'confirm') {
				if (typeof callback === 'function') {
					callback(action, instance, done);
				} else {
					throw new class implements Error {
						public message: string = 'callback is not function';
						public name: string = 'beforeClose';
					};
				}
			} else {
				done();
			}
		}
	}).then((action: any): void => {
		if (typeof success === 'function') {
			success(action);
		} else {
			throw new class implements Error {
				public message: string = 'callback is not function';
				public name: string = 'confirm';
			};
		}
	}).catch((action: any) => {
		if (typeof cancel === 'function') {
			cancel(action);
		} else {
			throw new class implements Error {
				public message: string = 'callback is not function';
				public name: string = 'cancel';
			};
		}
	});
}

export default msgbox;
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年07月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 场景
    • 代码
      • 代码连接 github
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档