vue-layer彈框外掛

安裝

npm i --save vue-layer

引用

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

引數說明

{
 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,//點選遮罩是否關閉
}

方法

 layer.alert(content,[options,yes]);
 // options和yes可以省略， 如果您不願意寫options，則可以直接寫確定按鈕的函式，即yes
 // content 可以為html

layer.confirm(content,yes,cancel]);
 // options，yes和cancel可以省略， 如果您不願意寫options，則可以直接寫確定按鈕的函式，即yes，或者覆蓋預設的cancel方法。PS：yes和cancel方法不能互換
 //content 可以為html

layer.msg(content,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'
});
// data引數可認為是componentName的props，同時 該方法會自動新增一個key為layerid的值， 該值為建立層的id， 可以直接用來關閉該層
// options引數直接寫到json裡即可，比如title

layer.open(options);

layer.close(id);

layer.closeAll(type);

其它說明

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

總結

到此這篇關於vue專案中使用vue-layer彈框外掛的方法的文章就介紹到這了,更多相關vue vue-layer彈框外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！