详解vue使用vue-layer-mobile组件实现toast，loading效果
安装vue-layer-mobile
//当前最新版本1.2.0 npminstallvue-layer-mobile //如新版遇到问题可回退旧版本 npminstallvue-layer-mobile@1.0.0
此版本安装后启动会报错，报错提示将css里的display:box改成display:flex;
在main.js里面全局引用
import'vue-layer-mobile/need/layer.css' importlayerfrom'vue-layer-mobile' Vue.use(layer)
使用方法
toast
this.$layer.toast({
className:'icon-check',//图标className如果为空toast位置位于下方,否则居中
content:'提示文字',
time:2000//自动消失时间toast类型默认消失时间为2000毫秒
})
toast:文字和图标:
this.$layer.toast({
icon:'icon-check',//图标clssName如果为空toast位置位于下方,否则居中
content:'提示文字',
time:2000//自动消失时间toast类型默认消失时间为2000毫秒
})
loading
this.$layer.loading('加载中...')
dialog:
this.$layer.dialog({
title:['这是标题','background:red;'],//第一个是标题内容第二个是标题栏的style(可以为空)
content:'这是内容',
contentClass:'className',
btn:['确定']
time:2000
})
//如果有btn
.then(function(res){
//res为0时是用户点击了左边为1时用户点击了右边
letposition=res===0?'left':'right'
console.log(position)
})
footer:
this.$layer.footer({
content:'这是内容',
btn:['取消','选项1','选项2']
})
//如果有btn
.then(function(res){
vartext=res==0?'取消':'选项'+res
console.log(text)
})
关闭弹窗
this.$layer.close()
如果在setTimeout里使用请注意this指向问题
另外，我感觉toast没有图标的时候默认显示在底部，不太好；loading的样式也有不太好看，自己改了layer-mobile的样式。
在oppo和vivo的webview中会出现，layer加载条无法关闭，非要手动点一下屏幕才能关闭。
解决办法：将this.$layer.close()写在方法最下面
.layui-m-layer{position:relative;z-index:19891014}.layui-m-layer*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,0);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain.layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:008pxrgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframeslayui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframeslayui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframeslayui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframeslayui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0.layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1.layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2.layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:00;box-shadow:none;color:#fff}.layui-m-layerchildh3{margin:0;padding:010px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px5px00;text-align:center}.layui-m-layerbtnspan,.layui-m-layerchildh3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px30px;line-height:22px;text-align:center;color:#fff;}.layui-m-layer1.layui-m-layercont{padding:0;text-align:left}.layui-m-layer2.layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2.layui-m-layerconti{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading1.4sinfiniteease-in-out;animation:layui-m-anim-loading1.4sinfiniteease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtnspan{position:relative;text-align:center;border-radius:005px5px}.layui-m-layer2.layui-m-layercontp{margin-top:15px;color:white;margin-bottom:10px}@-webkit-keyframeslayui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(.8);-webkit-transform:scale(.8)}}@keyframeslayui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(.8);-webkit-transform:scale(.8)}}.layui-m-layer2.layui-m-layerconti:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2.layui-m-layerconti.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2.layui-m-layercont>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:1pxsolid#D0D0D0;background-color:#F2F2F2}.layui-m-layerbtnspan{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtnspan[yes]{color:#40AFFE}.layui-m-layerbtnspan[no]{border-right:1pxsolid#D0D0D0;border-radius:0005px}.layui-m-layerbtnspan:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:00;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:0auto;left:0;right:0;bottom:10px;background:00}.layui-m-layer-footer.layui-m-layercont{padding:20px;border-radius:5px5px00;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer.layui-m-layerbtn{display:block;height:auto;background:00;border-top:none}.layui-m-layer-footer.layui-m-layerbtnspan{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer.layui-m-layerbtnspan[no]{color:#FD482C;border-top:1pxsolid#c2c2c2;border-radius:005px5px}.layui-m-layer-footer.layui-m-layerbtnspan[yes]{margin-top:10px;border-radius:5px}body.layui-m-layer.layui-m-layer-msg{width:auto;max-width:90%;margin:0auto;bottom:0;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg.layui-m-layercont{padding:10px20px}
.layui-m-layer2.layui-m-layercont{background:rgba(0,0,0,.8);padding:10px15px;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'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/
url('iconfont.svg?t=1481268530942#iconfont')format('svg');/*iOS4.1-*/
}
.iconfont{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;
color:#fff;
}
.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";}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。