详解vue使用vue-layer-mobile组件实现toast，loading效果

Z时代
2024-01-10
分类：综合

安装vue-layer-mobile

// 当前最新版本 1.2.0

npm install vue-layer-mobile

// 如新版遇到问题可回退旧版本

npm install vue-layer-mobile@1.0.0

此版本安装后启动会报错，报错提示将css里的display:box改成display:flex;

在main.js里面全局引用


import 'vue-layer-mobile/need/layer.css'
import layer from '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毫秒

})


this.$layer.loading('加载中...')

dialog:


this.$layer.dialog({
 title: ['这是标题', 'background:red;'], // 第一个是标题内容 第二个是标题栏的style(可以为空)
 content: '这是内容',
 contentClass: 'className',
 btn: ['确定']
 time: 2000
})
// 如果有btn
.then(function (res){
 // res为0时是用户点击了左边 为1时用户点击了右边
 let position = res === 0 ? 'left' : 'right'
  console.log(position)
 })

footer:


this.$layer.footer({
 content: '这是内容',
 btn: ['取消', '选项1', '选项2']
})
// 如果有btn
.then(function (res){
 var text = 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:0 0 8px rgba(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-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-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-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-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:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{margin:0;padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;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-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:15px;color:white;margin-bottom:10px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(.8);-webkit-transform:scale(.8)}}@keyframes layui-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-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.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: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,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,255,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,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px}
.layui-m-layer2 .layui-m-layercont{background: rgba(0,0,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'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('iconfont.svg?t=1481268530942#iconfont') format('svg'); /* iOS 4.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"; }