vue移动端弹框组件的实例

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

一、npm 安装

?

1 2 3 4

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

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

前端精品教程：百度网盘下载　　

?

1 2 3 4 5

//在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" }

三、引入和使用

?

1 2 3

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

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

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

// 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; color:#fff;' ,      content: '内容'     })    },    //close    testLayerClose(){     var _this = this ;     this .$layer.loading( '测试关闭方法' );     setTimeout( function (){      _this.$layer.close();     },3000);    }

几种效果展示：

前端精品教程：百度网盘下载

转载于:https://www.cnblogs.com/hudayang2008/p/9813278.html