详解vue使用vue-layer-mobile组件实现toast，loading效果
安装vue-layer-mobile此版本安装后启动会报错，报错提示将css里的display:box改成display:flex; 在main.js里面全局引用使用方法toast toast: 文字和图标: loading dialog: footer: 关闭弹窗如果在setTimeout里使用请注意this指向问题 另外，我感觉toast没有图标的时候默认显示在底部，不太好；loading的样式也有不太好看，自己改了layer-mobile的样式。 在oppo和vivo的webview中会出现，layer加载条无法关闭，非要手动点一下屏幕才能关闭。 解决办法：将this.$layer.close()写在方法最下面 div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:flex;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:0;background-color:rgba(0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px}
.layui-m-layer2 .layui-m-layercont{background: rgba(0,.8);padding:10px 15px;border-radius: 6px}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1481268530942'); /* IE9*/
src: url('iconfont.eot?t=1481268530942#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('iconfont.woff?t=1481268530942') format('woff'),/* chrome,firefox */
url('iconfont.ttf?t=1481268530942') format('truetype'),firefox,opera,Safari,Android,iOS 4.2+*/
url('iconfont.svg?t=1481268530942#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont { .icon-appreciate:before { content: "e644"; } .icon-check:before { content: "e645"; } .icon-close:before { content: "e646"; } .icon-warn:before { content: "e663"; } .icon-delete:before { content: "e6b4"; } .icon-notice:before { content: "e70a"; } .icon-github:before { content: "e66c"; } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |