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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python切换hosts文件代码示例
2013/12/31 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
快速查找Python安装路径方法
2020/02/06 Python
django和flask哪个值得研究学习
2020/07/31 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
学校办公室主任职责
2013/12/27 职场文书
眼镜促销方案
2014/03/15 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
学生检讨书怎么写
2014/10/09 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
邀请函范文
2015/02/02 职场文书
建筑工程催款函
2015/06/24 职场文书
大学生暑期实践报告
2015/07/13 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
mysql全面解析json/数组
2022/07/07 MySQL