详解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 相关文章推荐
Javascript this 的一些学习总结
Aug 31 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
vue.js实现双击放大预览功能
Jun 23 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木马webshell扫描器代码
2012/01/25 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
javascript 易错知识点实例小结
2020/04/25 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python基于递归解决背包问题详解
2019/07/03 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
如何用python处理excel表格
2020/06/09 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
烹调加工管理制度
2014/02/04 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
就业协议书范本
2014/10/08 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
大学生毕业评语
2014/12/31 职场文书
电力工程合作意向书
2015/05/11 职场文书
小学运动会通讯稿
2015/07/18 职场文书
创业计划书之美容店
2019/09/16 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
浅谈Node的内存泄露问题
2022/05/06 NodeJs