vue項(xiàng)目中使用vue-layer彈框插件的方法
安裝
npm i --save vue-layer
引用
import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue);
參數(shù)說明
{ type: 0, //0(信息框,默認(rèn))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進(jìn)行方向設(shè)定,可以設(shè)定tips: [1, '#c00'] tipsMore: false,//是否允許多個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,則可以直接寫時間到期的回調(diào)即可,即end方法 // 默認(rèn)msg的關(guān)閉時間為1.5秒 // content 可以為html layer.tips(content, follow, options); //content 可以為html //follow對css選擇器,用來定位目標(biāo) layer.iframe({ content: { content: componentName, //傳遞的組件對象 parent: this,//當(dāng)前的vue對象 data:{}//props }, area:['800px','600px'], title: 'title' }); // data參數(shù)可認(rèn)為是componentName的props,同時 該方法會自動添加一個key為layerid的值, 該值為創(chuàng)建層的id, 可以直接用來關(guān)閉該層 // options參數(shù)直接寫到j(luò)son里即可,比如title
layer.open(options);
layer.close(id);
layer.closeAll(type);
其它說明
該包的css都為vl-notice開頭, 需要重寫css樣式,覆蓋即可
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中使用vue-layer彈框插件的方法的文章就介紹到這了,更多相關(guān)vue vue-layer彈框插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 解決vue多層彈框時存在遮擋問題
- vue+elementui 實(shí)現(xiàn)新增和修改共用一個彈框的完整代碼
- vue自定義彈框效果(確認(rèn)框、提示框)
- vue實(shí)現(xiàn)可拖拽的dialog彈框
- 解決echarts vue數(shù)據(jù)更新,視圖不更新問題(echarts嵌在vue彈框中)
- vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
- Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
- Vue項(xiàng)目結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能(實(shí)例代碼)
- Vue自定義詢問彈框和輸入彈框的示例代碼
相關(guān)文章
vue2老項(xiàng)目中node-sass更換dart-sass的操作方法
這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-07-07深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個重要的實(shí)例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價值,感興趣的可以了解一下2024-07-07Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動放大縮小等功能。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2022-11-11vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面(實(shí)例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面,在項(xiàng)目下安裝axios,通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)
vue中對數(shù)組的元素進(jìn)行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05vue使用stompjs實(shí)現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細(xì)介紹了vue中使用stompjs實(shí)現(xiàn)mqtt消息推送通知,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06