vue移动端弹框组件的实例


Posted in Javascript onSeptember 25, 2018

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦!

一、npm 安装

// 当前最新版本 1.2.0 
npm install vue-layer-mobile
// 如新版遇到问题可回退旧版本 
npm install vue-layer-mobile@1.0.0

二、调整配置:因为这个组件中有woff,ttf,eto,svg类型文件,所以要配置一些loader, 

//在webpack.config.js中配置如下,首先安装url-loader和file-loader:
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

三、引入和使用

import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer)

四、具体使用介绍:——这个组件一共有6个方法,并不是完全仿layer-mobile,一些简单的弹框还是很好用的。

// toast: 文字和图标:
  testLayerToast(){  
   this.$layer.toast({
    icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中 
    content: '提示文字',
    time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒 
   })
  },
  // loading:
  testLayerLoading1(){
   var _this = this;
   this.$layer.loading('加载中...');
   setTimeout(function(){
    _this.$layer.close();
   },3000);
  },
  // dialog:
  testLayerDialog(){
   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:
  testLayerFooter(){
   this.$layer.footer({
    content: '这是内容',
    btn: ['取消', '选项1', '选项2']
   })
   // 如果有btn 
   .then(function (res){
    var text = res==0 ? '取消' : '选项'+res
    console.log(text)
   })
  },
  //open
  testLayerOpen(){
   this.$layer.open({
    style: 'border:none; background-color:#78BA32; color:#fff;',
    content:'内容'
   })
  },
  //close
  testLayerClose(){
   var _this = this;
   this.$layer.loading('测试关闭方法');
   setTimeout(function(){
    _this.$layer.close();
   },3000);
  }

几种效果展示:

vue移动端弹框组件的实例

vue移动端弹框组件的实例

以上这篇vue移动端弹框组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 #Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 #Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 #Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 #Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 #Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 #Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
JS简易计算器实例讲解
2020/06/30 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
python3中int(整型)的使用教程
2017/03/23 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
校园活动策划书范文
2014/01/10 职场文书
七年级数学教学反思
2014/01/22 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
六一儿童节标语
2014/10/08 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年秘书工作总结
2014/11/25 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏