w-component-ui/src/components/confirm/confirm.js

w Vue components project

/*
* 1.使用this.$confirm(optoion) 的方式调用
* 2.传参和默认值：optoion={}
*   width: 模态框的宽度，默认为'260px',//传入字符串样式-> '260px'
*   showCancelBtn: 布尔值，默认为true， 是否显示关闭按钮
*   cancel:用户点击关闭按钮调用的函数
*   confirm：用户点击确认按钮触发的函数
*   content：显示的文本内容
*
 */
import Confirm from './Wconfirm';

let plugin = {};
//删除dom元素
let removeDom = event => {
		document.body.removeChild(event.$el);
};
plugin.install = function (Vue) {
	// 声明弹窗构造器继承Confirm的构造器
	const ConfirmConstructor = Vue.extend(Confirm);


	Vue.prototype.$confirm = function (option = {}) {
		// 将confirm实例挂载到dom上
		let instance = new ConfirmConstructor().$mount(document.createElement('div'));
		// 初始化参数 instance 是子组件 option 是调用时用户的操作
		instance.visiable = true;// 是否展示
		instance.width = option.width || instance.width;//设置宽度
		instance.title = option.title || instance.title;//标题
		instance.cancelText = option.cancelText || instance.cancelText;//取消文本内容
		instance.sureText = option.sureText || instance.sureText;//确认文本内容
		instance.content = option.content || option || instance.content;//正文内容
		instance.showCancelBtn = option.showCancelBtn !== undefined ? option.showCancelBtn : true;// 是否展示取消按钮
		instance.confirmFn = option.Wconfirm || null;
		//把元素添加到页面
		document.body.appendChild(instance.$el);
		instance.$nextTick(()=>{
			instance.$refs.confirmContainer.classList.remove('translates');
		});
		let pro = new Promise(function (resolve, reject) {
			ConfirmConstructor.prototype.closeConfirm = function () {
				removeDom(instance);
				resolve(false);
				reject(false);
			};
			// 在原型上扩展确认方法
			ConfirmConstructor.prototype.submitConfirm = function () {
				removeDom(instance);
				resolve(true);
				reject(true);
			};
		});
		return pro;
	}
};
export default plugin