今天给大家分享一个功能强健高水准的web弹窗组件VueLayer。

vue-layer 一款备受web开发者青睐的layer.js弹窗组件的vue.js版本。拥有丰富友好的操作体验及文档，兼容主流浏览器。

安装

$ npm i vue-layer -S

引用

import Vue from 'vue';import layer from 'vue-layer'import 'vue-layer/lib/vue-layer.css';Vue.prototype.$layer = layer(Vue);

参数说明

{  type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）  title: '信息',  content: '',  area: 'auto',  offset: 'auto',  icon: -1,  btn: '确定',  time: 0,  shade: true,//是否显示遮罩  yes: '',  cancel: '',  tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']  tipsMore: false,//是否允许多个tips  shadeClose: true,//点击遮罩是否关闭}

插件使用

// options和yes可以省略， content 可以为htmllayer.alert(content, [options, yes]);layer.confirm(content, [options, yes, cancel]);// 默认msg的关闭时间为1.5秒layer.msg(content, [options, end]);//follow对css选择器，用来定位目标layer.tips(content, follow, options);// data参数可认为是componentName的props，options参数直接写到json里即可，比如titlelayer.iframe({  content: {    content: componentName, //传递的组件对象    parent: this,//当前的vue对象    data:{}//props  },  area:['800px','600px'],  title: 'title'});layer.open(options);layer.close(id);layer.closeAll(type);

提供各种丰富的演示示例

附上示例及仓库地址

# 预览地址 github地址

ok，就分享到这里。喜欢的话可以去尝试下哈。同时欢迎留言一起交流讨论~~