[轉]vue-layer使用

原文地址:https://www.npmjs.com/package/vue-layer?activeTab=readme

install

npm install vue-layer

 

Quick Start

在程序入口添加

import Vue from 'vue';

import layer from 'vue-layer'

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方法的默認消失時間，單位：秒

});

調用

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: true,//點擊遮罩是否關閉

  maxmin: true,//開啟最大化最小化

  scrollbar: true, //是否允許瀏覽器出現滾動條:默認是允許

  resize: false //是否允許拉伸，默認是不允許

}

 

Method

 layer.alert(content, [options, yes]);

 // options和yes可以省略， 如果您不願意寫options，則可以直接寫確定按鈕的函數，即yes

 // content 可以為html

 //yes如果是個function，這會自動添加參數layerid，

 (layerid)=>{

   this.$layer.close(layerid);

 }

 layer.confirm(content, [options, yes, cancel]);

  // options，yes和cancel可以省略， 如果您不願意寫options，則可以直接寫確定按鈕的函數，即yes，或者覆蓋默認的cancel方法。PS：yes和cancel方法不能互換

  //content 可以為html

   //yes,cancel如果是個function，這會自動添加參數layerid，

 (layerid)=>{

   this.$layer.close(layerid);

 }

 layer.loadding(option);

  // options ={time:3}，3秒自動關閉

  //options = {content:'請等待'} //可傳入文字

 layer.msg(content, [options, end]);

 // options和end可以省略， 如果您不願意寫options，則可以直接寫時間到期的回調即可，即end方法

 // 默認msg的關閉時間為1.5秒

 // content 可以為html

layer.tips(content, follow, options);

//content 可以為html

//follow對css選擇器，用來定位目標

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.open(options);

layer.close(id);

layer.closeAll(type);

 

關於this.$layer.iframe

其實使用iframe層，除了操作方便外，主要的目的是隔離代碼， 降低代碼復雜度。而在vue中，組件就是功能塊的基本單位了，所以vue-layer中並不存在iframe的DOM元素，這里用的都是組件。 這里的content有三個參數：

##### content: 此參數為組件對象， 比如

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

此處content就為editFrom即可。

##### parent:

此參數其實就是當前調用layer的vue對象， 即this即可。在editForm中可以直接使用， this.$parent來獲取調用layer的vue對象，然后父子傳值神馬的，就很easy，當然也可以直接使用vuex，就不用this.$parent了

##### data: 此參數可認為是editForm的props，傳遞到iframe后是這個數據的深拷貝，改變數據不會影響來源數據，然后你懂得。

• 該方法會自動添加一個key為layerid的值， 該值為創建層的id， 可以直接使用
• 該方法會自動添加一個key為lydata的值， 該值為data的淺拷貝， 當iframe要更改父窗口傳遞的數據的時候，可以直接使用lydata來修改，對於表單使用非常方便

結果即為：

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 {};

      }

    }

  },

  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;

  }

};

 

樣式調整

該包的css都為vl-notice開頭， 需要重寫css樣式，覆蓋即可