vue-layer-cj[^以左盐的基础上修改部分功能]
install
npm install vue-layer-cj
// "eslint:recommended"
Quick Start
在程序入口添加
import Vue from 'vue';
import layer from 'vue-layer-cj'
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue);
全局参数重置
import Vue from 'vue';
import layer from 'vue-layer'
Vue.prototype.$layer = layer({
msgtime: 3,//目前只有一项,即msg方法的默认消失时间,单位:秒
});
layer.iframe({
content: {
content: componentName, //传递的组件对象
parent: this,//当前的vue对象
data:{}//props
},
area:['800px','600px'],
title: 'title',
cancel:()=>{//关闭事件
alert('关闭iframe');
}
});
// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层
// options参数直接写到json里即可,比如title
//弹窗最大化
layer.full(layerid);
//弹窗最小化
layer.min(layerid);
//还原弹窗
layer.restore(layerid);
结果即为:
methods:{
eidt() {
this.$layer.iframe({
content: {
content: editForm, //传递的组件对象
parent: this,//当前的vue对象
data:{
info:{a:1}
}//props
},
area:['800px','600px'],
title:"editForm"
});
}
}
iframe组件中
export default {
data() {
return {
form: {
}
};
},
props: {
info: {
type: Object,
default: () => {
return {};
}
},
layerid: {
type: String,
default: ""
},
lydata: {
type: Object,
default: () => {
return {};
}
},
lyoption: {
type: Object,
default: () => {
return {};
}
}
},
methods: {
onSubmit() {
this.$layer.msg("提交成功", () => {
this.lydata.info.name = this.form.name;
this.$layer.close(this.layerid);
});
},
cancel() {
this.$layer.close(this.layerid);
}
},
mounted() {
this.form = this.info
}
};