如何在vue項(xiàng)目中使用vue-layer彈框插件

這篇文章給大家介紹如何在vue項(xiàng)目中使用vue-layer彈框插件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

安裝

npm i --save vue-layer

引用

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

參數(shù)說(shuō)明

{
 type: 0, //0（信息框，默認(rèn)）1（頁(yè)面層）2（iframe層）3（加載層）4（tips層）
 title: '信息',
 content: '',
 area: 'auto',
 offset: 'auto',
 icon: -1,
 btn: '確定',
 time: 0,
 shade: true,//是否顯示遮罩
 yes: '',
 cancel: '',
 tips: [0,{}],//支持上右下左四個(gè)方向，通過(guò)1-4進(jìn)行方向設(shè)定,可以設(shè)定tips: [1, '#c00']
 tipsMore: false,//是否允許多個(gè)tips
 shadeClose: true,//點(diǎn)擊遮罩是否關(guān)閉
}

方法

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

layer.confirm(content, [options, yes, cancel]);
 // options，yes和cancel可以省略， 如果您不愿意寫options，則可以直接寫確定按鈕的函數(shù)，即yes，或者覆蓋默認(rèn)的cancel方法。PS：yes和cancel方法不能互換
 //content 可以為html

layer.msg(content, [options, end]);
 // options和end可以省略， 如果您不愿意寫options，則可以直接寫時(shí)間到期的回調(diào)即可，即end方法
 // 默認(rèn)msg的關(guān)閉時(shí)間為1.5秒
 // content 可以為html

layer.tips(content, follow, options);
//content 可以為html
//follow對(duì)css選擇器，用來(lái)定位目標(biāo)

layer.iframe({
 content: {
  content: componentName, //傳遞的組件對(duì)象
  parent: this,//當(dāng)前的vue對(duì)象
  data:{}//props
 },
 area:['800px','600px'],
 title: 'title'
});
// data參數(shù)可認(rèn)為是componentName的props，同時(shí) 該方法會(huì)自動(dòng)添加一個(gè)key為layerid的值， 該值為創(chuàng)建層的id， 可以直接用來(lái)關(guān)閉該層
// options參數(shù)直接寫到j(luò)son里即可，比如title

layer.open(options);

layer.close(id);

layer.closeAll(type);

關(guān)于如何在vue項(xiàng)目中使用vue-layer彈框插件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。