js mobile toast

[jackPanyj]

在做手机端的时候，几乎每个页面都需要弹toast, 所以就简单的对toast做了下封装。

js代码如下

function toast (msg = '', ms = 1000, id = 'toast') {
  var div = document.createElement('div')
  div.id = id
  div.innerText = msg
  document.body.appendChild(div)
  setTimeout(function () {
    document.querySelector('#' + id).remove()
  }, ms)
}

代码很简单，也没有什么好解释的。

scss 代码如下

@function r($px){
    @return $px / 37.5 + rem;
}
#toast {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: r(30);
  width: 70%;
  height: r(100);
  text-align: center;
  line-height: r(100);
  border-radius: r(10);
  color: white;
  background-color: rgba(0,0,0,.6);
}

其中的样式是我们的ui给出的，具体的网站请参考具体的样式