my-vue-layer
自己用的可以无限打开的弹窗,原作者:https://www.npmjs.com/package/vue-layer 你们别下载,我只是方便公司自己用的,所以改了点东西,主要我只用下边的layer.iframe功能,点击按钮,弹出弹窗,弹窗里加载的是vue组件
my-vue-layer
install
npm install my-vue-layer
Quick Start
在程序入口添加
;Vueprototype$layer = ;
全局参数重置
;Vueprototype$layer = ;
调用
this$layer;
Attribut
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: false titleColor:''//上方标题的颜色 titleIcon:''//上方标题的icon图标
Method
layer; // options和yes可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes // content 可以为html
layer; // options,yes和cancel可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes,或者覆盖默认的cancel方法。PS:yes和cancel方法不能互换 //content 可以为html
layer; // options和end可以省略, 如果您不愿意写options,则可以直接写时间到期的回调即可,即end方法 // 默认msg的关闭时间为1.5秒 // content 可以为html
layer;//content 可以为html//follow对css选择器,用来定位目标
layer;// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层// options参数直接写到json里即可,比如title
layer;
layer;
layer;
关于this.$layer.iframe
其实使用iframe层,除了操作方便外,主要的目的是隔离代码, 降低代码复杂度。而在vue中,组件就是功能块的基本单位了,所以vue-layer中并不存在iframe的DOM元素,这里用的都是组件。 这里的content有三个参数:
##### content: 此参数为组件对象, 比如
;
此处content就为editFrom即可。
##### parent:
此参数其实就是当前调用layer的vue对象, 即this即可。在editForm中可以直接使用, this.$parent来获取调用layer的vue对象,然后父子传值神马的,就很easy,当然也可以直接使用vuex,就不用this.$parent了
##### data: 此参数可认为是editForm的props,然后你懂得。 注: 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接使用
结果即为:
methods: { this$layer; }
样式调整
该包的css都为vl-notice开头, 需要重写css样式,覆盖即可