vue-layer，在vue中的layer插件

 

npm install vue-layer

在程序入口添加

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

调用

this.$layer.alert("！");

Attribut

        {
  type: 0,
  title: '信息',
  content: '',
  area: 'auto',
  offset: 'auto',
  icon: -1,
  btn: '确定',
  time: 0,
  shade: true,
  yes: '',
  cancel: '',
  tips: [0,{}],
  tipsMore: false,//
  shadeClose: false,
}

layer.iframe({
  content: {
    content: componentName, //传递的组件对象
    parent: this,//当前的vue对象
    data:[]//props
  },
  area:['800px','600px']
});

layer.open(options);

layer.close(id);

layer.closeAll(type);

其实使用iframe层，除了操作方便外，主要的目的是隔离代码， 降低代码复杂度。而在vue中，组件就是功能块的基本单位了，所以vue-layer中并不存在iframe的DOM元素，这里用的都是组件。 这里的content有三个参数：1.content此参数为组件对象， 比如

 import editFrom from './edir-form.vue';

 

methods:{
   eidt() {
	  this.$layer.iframe({
		content: {
		  content: editForm, //传递的组件对象
		  parent: this,//当前的vue对象
		  data:[]//props
		},
		area:['400px','300px'],
		title:"editForm"
	  });
  }
}