弹窗共通

弹窗是以vue+element-ui为基础，抽取出的共通API，浏览器控制太调用如是如下：

  var  vm  = new Vue();
  vm.xh_utils.successTip('我是提示弹窗');

一. 提示弹窗

例子：

1.1 message方法'

提示框
@param {Object} obj 参数
@param {string} obj.text 提示内容
@param {string} obj.type 弹窗类别 （ success/warning/info/error）
@param {boolean} obj.showClose 是否显示关闭按钮
@returns {void}

  // 执行代码
  const successTip = text => {
    message({
      text: text,
      type: 'error'
    })；
  }  
 
  // 调用代码
  var  vm  = new Vue();
  var obj = {};
  obj.text = 'message方法';
  obj.showClose = true;
  obj.type = 'info';
  vm.xh_utils.tip(obj);

1.2 successTip方法

参数：
@param {string} text成功提示信息
@returns {void}

  // 执行代码
  const successTip = text => {
    message({
      text: text,
      type: 'error'
    })；
  }  
 
  // 调用代码
  var  vm  = new Vue();
  vm.xh_utils.successTip('我是提示弹窗');

1.3 errorTip方法（错误提示框）

参数：
@param {string} text 错误提示信息
@returns {void}

  // 执行代码
  const errorTip = text => {
    message({
      text: text,
      type: 'error'
    })；
  }  
 
  // 调用代码
  var  vm  = new Vue();
  vm.xh_utils.errorTip('我是提示弹窗');

1.4 waringTip方法（警告提示框）

参数：
@param {string} text 警告提示信息
@returns {void}

  // 执行代码
  const waringTip = text => {
    message({
        text: text,
        type: 'warning'
    })
  }
 
  // 调用代码
  var  vm  = new Vue();
  vm.xh_utils.waringTip ('警告提示框');

---

二. 确认弹窗

确认消息弹窗
@param {String} message 确认消息
@param {String} title 确认标题
@param {Object} option 配置参数
  option = {
    type: '',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmCall: () => {},
cancelCall: () => {}
};
@return {Object} 返回对象

  // 执行代码
  const Confirm = (message, title = '提示', option = {}) => {
    // 默认参数
    const defOpt = {
       type: 'warning',
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       confirmCall: () => {},
       cancelCall: () => {}
    }

    // 合并对象
    option = Object.assign(defOpt, option);

    // 调取confirm方法
    return vue.$confirm(message, title,   option).then(option.confirmCall).catch(option.cancelCall);
  }
 
  // 调用代码
  var  vm  = new Vue();
  vm.xh_utils.errorTip('我是提示弹窗');

---

三. Alert弹窗

@param {String} message 确认消息
@param {String} title 确认标题
@param {Object} option 配置参数
  option = {
    confirmButtonText: '确定',
    callback: action => {}
  };
@return {Object} 返回对象

// 执行代码
const Alert = (message, title = '提示', option = {}) => {
  // 默认参数
  const defOpt = {
    confirmButtonText: '确定',
    callback: action => {}
  }

  // 合并对象
  option = Object.assign(defOpt, option);

  return vue.$alert(message, title, option);
}


// 调用代码
var vm = new Vue();
vm.xh_utils.alert('我是Alert弹窗', '提示',{});

---

四. 侧边弹窗

@param {String} obj.title 标题
@param {String} obj.message 说明文字
@param {Boolean} obj.dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理。默认：false
@param {String} obj.type 主题样式，如果不在可选值内将被忽略 （e.g success|warning|info|error）
@param {number} obj.duration 显示时间, 毫秒。设为 0 则不会自动关闭
@param {String} obj.postion 自定义弹出位置，默认'top-right' （e.g top-right|top-left|bottom-right|bottom-left）
@param {Boolean} obj.showClose 是否显示关闭按钮 默认:true
@param {Function}obj.onClose 关闭时的回调函数
@param {number} obj.offset 偏移的距离，
@param {String} obj.background 设置通知背景
@return {Object} notrify对象

// 执行方法

const notrify = ({ title = '', message = '', dangerouslyUseHTMLString = false, type = '', duration = 0, position = 'top-right', showClose = true, onClose = () => {}, offset = 0, background }) => {
  const notrifyObj =  vue.$notify({
    title: title,
    message: message,
    dangerouslyUseHTMLString: dangerouslyUseHTMLString,
    type: type,
    duration: duration,
    position: position,
    showClose: showClose,
    onClose: onClose,
    offset: offset
  });

  // 设置背景色
  if (background) {
    notrifyObj.dom.style.background = 'background';
  } else {
    if (type === 'success') {
      notrifyObj.dom.style.background = 'firebrick';
    } else if (type === 'error') {
      notrifyObj.dom.style.background = 'crimson';
    } else if (type === 'warning') {
      notrifyObj.dom.style.background = 'coral';
    } else if (type === 'info') {
      notrifyObj.dom.style.background = 'gainsboro';
    }
  }

  // 返回侧边对象
  return notrifyObj;
}

// 调用方法
var vm = new Vue();
var obj = {};
obj.title = "标题";
obj.message = "说明文字";
vm.xh_utils.notrify(obj);

---