安装vue-layer-mobile
此版本安装后启动会报错，报错提示将css里的display:Box改成display:flex;
在main.js里面全局引用
toast
提示
文字',time: 2000 //
自动消失时间 toast类型默认消失时间为2000毫秒
})
toast: 文字和图标:
提示
文字',time: 2000 //
自动消失时间 toast类型默认消失时间为2000毫秒
})
loading
dialog:
标题','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:
内容',btn: ['取消','选项1','选项2']
})
// 如果有btn
.then(function (res){
var text = res==0 ? '取消' : '选项'+res
console.log(text)
})
如果在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 {
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"; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/30595.html
