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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
koa socket即时通讯的示例代码
Sep 07 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php输出形式实例整理
2020/05/05 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
js数组去重的hash方法
2016/12/22 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
python代码能做成软件吗
2020/07/24 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS