vue-layer-custom
install
npm install vue-layer-custom
// "eslint:recommended"
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: true//点击遮罩是否关闭 maxmin: true//开启最大化最小化 scrollbar: true //是否允许浏览器出现滚动条:默认是允许 resize: false //是否允许拉伸,默认是不允许
Method
layer;// options和yes可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes// content 可以为html//yes如果是个function,这会自动添加参数layerid, { this$layer;};
layer;// options,yes和cancel可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes,或者覆盖默认的cancel方法。PS:yes和cancel方法不能互换//content 可以为html//yes,cancel如果是个function,这会自动添加参数layerid, { this$layer;};
layer;// options ={time:3},3秒自动关闭//options = {content:'请等待'} //可传入文字
layer;// options和end可以省略, 如果您不愿意写options,则可以直接写时间到期的回调即可,即end方法// 默认msg的关闭时间为1.5秒// content 可以为html
layerpromptoptions yes;//特殊参数: value 要回显的值//formType: 1text,2password,3textarea
layer;//content 可以为html//follow对css选择器,用来定位目标
layer;// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层// options参数直接写到json里即可,比如title
layer;
layer;
//弹窗最大化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 了,另外自动注入了原始数据的浅拷贝 lydata,也可以直接赋值这个数据来同步父对象的数据
data:
此参数可认为是 editForm 的 props,传递到 iframe 后是这个数据的深拷贝,改变数据不会影响来源数据,然后你懂得。
- 该方法会自动添加一个 key 为 layerid 的值, 该值为创建层的 id, 可以直接使用
- 该方法会自动添加一个 key 为 lydata 的值, 该值为 data 的浅拷贝, 当 iframe 要更改父窗口传递的数据的时候,可以直接使用 lydata 来修改,对于表单使用非常方便
结果即为:
methods: { this$layer; }
iframe 组件中
{ return form: {} ; } props: info: type: Object { return {}; } layerid: type: String default: "" lydata: type: Object { return {}; } methods: { this$layer; } { this$layer; } { thisform = thisinfo; };
样式调整
该包的 css 都为 vl-notice 开头, 需要重写 css 样式,覆盖即可