复写alert()弹框

在项目中 有时请求完接口需要给用户提示一些信息最方便醒目的就是弹框提示，很多UI组件库也有弹框，但是使用时要引入，引入很麻烦而且更改也比较费劲！！！还有一点就是一个项目弹框还是统一风格比较好看，window.alert()当你点击确定才会执行下面的流程 所以我也是参考他人自己写了一个弹框，不说了。上代码

import $ from 'jquery'
const width = $(window).width() * 0.8
const height = 160
let messageBox = (ele, title, content) => {
  var html = $(ele)
  html.find('.window-layer').width(width).css('margin-left', -width / 2).css('margin-top', -height / 2 - 36)
  if (valueEmpty(title)) {
    html.find('.title').remove()
    html.find('.window-layer .body-layer').css('border-radius', '3px')
  } else {
    html.find('.title').find(':header').html(title)
  }
  html.find('.content').html(content)
  html.appendTo('body').fadeIn('fast')
  $('.win .w-btn:first').focus()
  $('.w-btn').click(() => {
    $('.win iframe').fadeOut()
    $('.win').fadeOut('fast')
    setTimeout(() => {
      $('.win iframe').remove()
      $('.win').remove()
    }, 200)
  })
}
window.alert = (title, content, message) => {
  var html = `
    <div class="win">
      <div class="mask-layer"></div>
      <div class="window-layer">
        <iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
        <div class="title"><h3></h3></div>
        <div class="body-layer">
          <p class="content"></p>
          <p class="btns">
            <button class="w-btn" tabindex="1">确定</button>
          </p>
        </div>
      </div>
    </div>
  `
  messageBox(html, title, content, message)
}
function valueEmpty (str) {
  if (str === 'null' || str == null || str === '' || str === 'undefined' || str === undefined || str === 0) {
    return true
  } else {
    return false
  }
}



复制代码

具体样式大家可以先写好然后再写js进行传值js文件可以这样写 入口文件引入就OK 在组件中使用时就直接alert()

简单就这些 有问题可以一起交流 嘿嘿相互学习