vue-layer彈框插件

安裝

npm i --save vue-layer

引用

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

參數(shù)說明

{ 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，則可以直接寫確定按鈕的函數(shù)，即yes // content 可以為htmllayer.confirm(content, [options, yes, cancel]); // options，yes和cancel可以省略， 如果您不愿意寫options，則可以直接寫確定按鈕的函數(shù)，即yes，或者覆蓋默認的cancel方法。PS：yes和cancel方法不能互換 //content 可以為htmllayer.msg(content, [options, end]); // options和end可以省略， 如果您不愿意寫options，則可以直接寫時間到期的回調即可，即end方法 // 默認msg的關閉時間為1.5秒 // content 可以為htmllayer.tips(content, follow, options);//content 可以為html//follow對css選擇器，用來定位目標layer.iframe({ content: { content: componentName, //傳遞的組件對象 parent: this,//當前的vue對象 data:{}//props }, area:[’800px’,’600px’], title: ’title’});// data參數(shù)可認為是componentName的props，同時 該方法會自動添加一個key為layerid的值， 該值為創(chuàng)建層的id， 可以直接用來關閉該層// options參數(shù)直接寫到json里即可，比如title

layer.open(options);

layer.close(id);

layer.closeAll(type);

其它說明

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

總結

到此這篇關于vue項目中使用vue-layer彈框插件的方法的文章就介紹到這了,更多相關vue vue-layer彈框插件內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！