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 页面划词搜索JS
Sep 28 Javascript
Javascript变量函数浅析
Sep 02 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Postman模拟发送带token的请求方法
Mar 31 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 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
德劲1103的维修打理经验
2021/03/02 无线电
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python读取文件名称生成list的方法
2018/04/27 Python
python实现月食效果实例代码
2019/06/18 Python
超简单的Python HTTP服务
2019/07/22 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
社区十八大感言
2014/01/19 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
团结友爱主题班会
2015/08/13 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL