基于 vue+layer.js 超青睐的弹窗组件VueLayer

今天给大家分享一个功能强健高水准的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 可以为html
layer.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里即可，比如title
layer.iframe({
  content: {
    content: componentName, //传递的组件对象
    parent: this,//当前的vue对象
    data:{}//props
  },
  area:['800px','600px'],
  title: 'title'
});

layer.open(options);

layer.close(id);

layer.closeAll(type);

提供各种丰富的演示示例

附上示例及仓库地址

# 预览地址
http://layer.zuoyanit.com/

# github地址
https://github.com/zuoyanart/vue-layer

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