弹窗组件封装： 原生js封装toast 、二次封装element $confirm

设计非要把弹窗换个样式，确认取消按钮位置也跟原组件不一样，为了使用方便，就二次封装一下。。

  /**
   * 重构confirm弹窗样式
   * @param {*} _this 页面this
   * @param {*} title 内容
   * @param {*} type 图标class  warning\success\danger
   */
  static qyConfirm(_this, title, type) {
    // 显示dom
    let msg = `<div class="qyConfrim-cont">
                  <i class="${type}"></i>
                  <span>${title}</span>
                </div>`
    // 构建confirm
    return new Promise((resolve, reject) => {
      _this.$confirm(msg, '', {
        confirmButtonText: '取消',
        cancelButtonText: '确定',
        confirmButtonClass: 'confrimBtn',
        cancelButtonClass: 'cancelBtn',
        dangerouslyUseHTMLString: true,
        showClose: false,
        closeOnClickModal: false,
        customClass: 'qyConfrim'
      }).then(() => {
        // 由于换了原组件的确认取消位置，所以反向resolve
      }).catch(() => {
        resolve()
      })
    })
  }


// 封装后使用方式
this.tool.qyConfirm(this, '是否确认删除？', 'warning').then(function () {
   // do something
})

// 原使用方式
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
        }).catch(() => {
});

由于引用toast一直用不起。。。。就造了个轮子。。。 

  /**
   * 自定义toast弹窗 
   * @param {*} value
   * @param {*} type text\fail\success 默认不传使用 text
   * @param {*} duration 持续时间
   */
  static _toast (value,type,duration=3000){
    // 唯一id标识
    let uniqueIds = 'poemTast_' +  parseInt(Math.random() * 1000)
    // 构建dom
    let htm = `
      <div id="${uniqueIds}" class="poem_toast ${['fail','success'].includes(type) ? '' : 'text'}">
        ${type === 'fail' ? '<i class="van-icon van-icon-fail van-toast__icon"></i>' : ''}
        ${type === 'success' ? '<i class="van-icon van-icon-success van-toast__icon"></i>' : ''}
        <span>${value}</span>
      </div>
    `
    // 向#app内添加元素
    let appEL = document.getElementById('app')
    appEL.insertAdjacentHTML('beforeEnd',htm)
    // 定时清除
    setTimeout(() => {
      let delEl = document.getElementById(uniqueIds)
      appEL.removeChild(delEl)
    }, duration);
  }





// 使用方式
this.tool._toast('创建成功')  //--- 只显示文本
this.tool._toast('创建成功','success',5000)  //---显示成功提示