vue-layer

install

npm install vue-layer

Quick Start

在程式入口新增

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

呼叫

this.$layer.alert("找不到物件！");

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,}

Method

 layer.alert(contetn, options, yes);

 layer.confirm(content, options, yes, cancel)

 layer.msg(contetn, options, end);

layer.tips(content
 
, follow, options);

layer.iframe({
  content:{
    content: componentName,//傳遞的元件物件
    parent:this,//當前的vue物件
    data:[]//props},
  area:['800px','600px']});

layer.open(options);

layer.close(id);

layer.closeAll(type);

特別PS，

關於this.$layer.iframe

其實使用iframe層，除了操作方便外，主要的目的是隔離程式碼， 降低程式碼複雜度。而在vue中，元件就是功能塊的基本單位了，所以vue-layer中並不存在iframe的DOM元素，這裡用的都是元件。 這裡的content有三個引數：1.content此引數為元件物件， 比如

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

此處content就為editFrom即可。

1. parent 此引數其實就是當前呼叫layer的vue物件， 即this即可。在editForm中可以直接使用， this.$parent來獲取呼叫layer的vue物件，然後父子傳值神馬的，就很easy，當然也可以直接使用vuex，就不用this.$parent了
2. data 此引數可認為是editForm的props，然後你懂得

結果即為：

methods:{
   eidt(){this.$layer.iframe({
		content:{
		  content: editForm,//傳遞的元件物件
		  parent:this,//當前的vue物件
		  data:[]//props},
		area:['800px','600px'],
		title:"editForm"});}}