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


Posted in Javascript onAugust 31, 2018

安装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毫秒
})

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时用户点击了右边
 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"; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php开发工具有哪五款
2015/11/09 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php数组和链表的区别总结
2019/09/20 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
Javascript模块模式分析
2008/05/16 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
Javascript的闭包详解
2014/12/26 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python中pygame模块用法实例
2014/10/09 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python实现按长宽比缩放图片
2018/06/07 Python
python实现键盘输入的实操方法
2019/07/16 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python add_argument()用法解析
2020/01/29 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
数组越界问题
2015/10/21 面试题
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书