进口vue-layer-mobile/需要/layer.css '
从“vue-layer-mobile”进口层
Vue.use(层)
<强>使用方法
烤面包
美元。layer.toast ({
名称:icon-check,//图标名称如果为空吐司位置位于下方,否则居中
内容:“提示文字”,
时间:2000//自动消失时间吐司类型默认消失时间为2000毫秒
}）
之前
吐司:文字和图标:
美元。layer.toast ({
图标:“icon-check ',//图标clssName如果为空吐司位置位于下方,否则居中
内容:“提示文字”,
时间:2000//自动消失时间吐司类型默认消失时间为2000毫秒
}）
之前
加载
layer.loading美元。(“加载中……)
之前
对话框:
美元。layer.dialog ({
标题:['这是标题','背景:红色;'],//第一个是标题内容第二个是标题栏的样式(可以为空)
内容:“这是内容”,
contentClass:“名字”,
btn:['确定的)
时间:2000年
}）//如果有btn
不要犹豫(函数(res) {//res为0时是用户点击了左边为1时用户点击了右边
让位置====0 & # 63;‘左’:‘正确的’
console.log(位置)
}）
之前
,页脚:
美元。layer.footer ({
内容:“这是内容”,
btn:['取消”、“选项1 ','选项2》)
}）//如果有btn
不要犹豫(函数(res) {
var文本===0 & # 63;“取消”:“选”项+ res
console.log(文本)
}）
之前
<>强关闭弹窗
这个。$ layer.close ()
如果在setTimeout里使用请注意这指向问题
另外,我感觉面包没有图标的时候默认显示在底部,不太好,加载的样式也有不太好看,自己改了layer-mobile的样式。
在同僚和体内的webview中会出现,层加载条无法关闭,非要手动点一下屏幕才能关闭。
解决办法:将这个。美元layer.close()写在方法最下面
.layui-m-layer{:相对;z - index: 19891014}。layui-m-layer * {-webkit-box-sizing:内容框;-moz-box-sizing:内容框;box-sizing:内容框}.layui-m-layermain, .layui-m-layershade{:固定;左:0;:0;宽度:100%;高度:100%}.layui-m-layershade {background: rgba (0, 0, 0, 0); pointer-events:汽车}.layui-m-layermain{显示:表;字体类型:Helvetica, arial,无衬线;pointer-events:没有}。layui-m-layermain .layui-m-layersection{显示:表格单元;vertical-align:中间;text-align:中心}.layui-m-layerchild{:相对;显示:inline-block; text-align:左;background - color: # fff;字体大小:14 px; border - radius: 5 px;不必:0 0 8 px rgba (0, 0, 0, 1。); pointer-events:汽车;-webkit-overflow-scrolling:触摸;-webkit-animation-fill-mode:两个;animation-fill-mode:两个;-webkit-animation-duration: 2;动画:。{2}@-webkit-keyframes layui-m-anim-scale{0%不透明度:0;-webkit-transform:规模(5);变换:规模(5)}100%{不透明度:1;-webkit-transform:(1)规模;变换:规模(1)}}@keyframes layui-m-anim-scale 0%{{不透明度:0;-webkit-transform:规模(5);变换:规模(5)}100%{不透明度:1;-webkit-transform:(1)规模;变换:规模(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%{{不透明度:0;-webkit-transform: translateY (800 px);变换:translateY (800 px)} 100%{不透明度:1;-webkit-transform: translateY(0);变换:translateY (0)}} @keyframes layui-m-anim-up 0%{{不透明度:0;-webkit-transform: translateY (800 px);变换:translateY (800 px)} 100%{不透明度:1;-webkit-transform: translateY(0);变换: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{宽度:90%;max-width: 640 px}。layui-m-layer1 .layui-m-layerchild{边界:没有;border - radius: 0}。layui-m-layer2 .layui-m-layerchild{宽度:汽车;max-width: 260 px; min-width: 40 px;边界:没有;背景:0 0;不必:没有,颜色:# fff}。layui-m-layerchild h4{保证金:0;填充:0 10 px;高度:60 px;行高:60 px;字体大小:16 px;粗细:400;border - radius: 5 px 5 px 0 0; text-align:中心}。layui-m-layerbtn跨度。layui-m-layerchild h4{文本溢出:省略;溢出:隐藏;空白:nowrap}}。layui-m-layercont{填充:50 px 30 px;行高:22 px; text-align:中心;颜色:# fff;}。layui-m-layer1 .layui-m-layercont{填充:0;text-align:左}。layui-m-layer2 .layui-m-layercont {text-align:中心;填充:0;行高:0}。layui-m-layer2 .layui-m-layercont我{宽度:25 px;高度:25 px; margin-left: 8 px;显示:inline-block; background - color: # fff; border - radius: 100%; -webkit-animation: layui-m-anim-loading 1.4 s无限ease-in-out;动画:layui-m-anim-loading 1.4 s无限ease-in-out; -webkit-animation-fill-mode:两个;animation-fill-mode:两}.layui-m-layerbtn,。layui-m-layerbtn跨度{位置:相对;text-align:中心;border - radius: 0 0 5 px 5 px}。layui-m-layer2 .layui-m-layercont p {margin-top: 15 px;颜色:白色;margin-bottom: 10 px} @-webkit-keyframes layui-m-anim-loading{0%、100%、80%{变换:规模(0);-webkit-transform:规模(0)}40%{变换:规模(8);-webkit-transform:规模(8)}}@keyframes layui-m-anim-loading{0%、100%、80%{变换:规模(0);-webkit-transform:规模(0)}40%{变换:规模(8);-webkit-transform:规模(8)}}。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
