vue項目中使用vue-layer彈框插件的方法

更新時間：2020年03月11日 14:15:27 作者：郭敏

這篇文章主要介紹了vue項目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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進行方向設(shè)定,可以設(shè)定tips: [1, '#c00']
 tipsMore: false,//是否允許多個tips
 shadeClose: true,//點擊遮罩是否關(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，或者覆蓋默認的cancel方法。PS：yes和cancel方法不能互換
 //content 可以為html

layer.msg(content, [options, end]);
 // options和end可以省略， 如果您不愿意寫options，則可以直接寫時間到期的回調(diào)即可，即end方法
 // 默認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ù)可認為是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項目中使用vue-layer彈框插件的方法的文章就介紹到這了,更多相關(guān)vue vue-layer彈框插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue獲取DOM元素并修改屬性的方法
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下
2022-10-10
Vue中的過濾器(filter)詳解
vue filter 過濾器處理數(shù)據(jù)的作用,使用位置:mustache插值和v-bind表達式，過濾器用于文本轉(zhuǎn)換,復(fù)雜的數(shù)據(jù)處理則用computed，這篇文章主要介紹了Vue中的過濾器（filter）,需要的朋友可以參考下
2022-11-11
vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實現(xiàn)方法
這篇文章主要介紹了vue中數(shù)據(jù)綁定值(字符串拼接)的幾種實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
解決vue3報錯:找不到模塊或其相應(yīng)的類型聲明
這篇文章主要給大家介紹了關(guān)于如何解決vue3報錯:找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個錯誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下
2023-07-07
vue生命周期與鉤子函數(shù)簡單示例
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實現(xiàn)技巧,需要的朋友可以參考下
2019-03-03
Vue中計算屬性未生效:原因、排查與解決過程
本文將深入探討計算屬性未生效的常見原因,并提供排查和解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
vue-cli3中如何打包成zip壓縮文件
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue中axios的get請求和post請求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求,post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務(wù)器進行確認,然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請求和post請求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧
2023-10-10
vue 右鍵菜單插件簡單、可擴展、樣式自定義的右鍵菜單
這篇文章主要介紹了vue 右鍵菜單插件簡單、可擴展、樣式自定義的右鍵菜單，本文給大家分享個例子，給大家及時的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2018-11-11
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11