[vuejs] vue2.0-layer-mobile移動端彈層

vue2.0-layer-mobile移動端彈層

本次組件升級支持slot內容分發功能，實現高定製內容風格的彈層

安裝方法

npm install vue2-layer-mobile -S

初始化

import layer from 'vue2-layer-mobile' Vue.use(layer)

該組件是基於開源插件layer-mobile用vue從新改寫的，而且擴展了一些便捷方法 具體的API與layer-mobile高度保持一值，你們能夠放心使用

組件使用

// 普通使用 <layer v-model="showLayer" @sure="yesFn" :btn="['肯定使用', '放棄']" :content="'歡迎使用vue2-layer-mobile'"></layer> // 利用 slot，自定義風格各異的彈層 // 擴展支持 slot 是爲了解決以 plugin 形式時，經過 content 屬性傳入生成的內容不支持 vue 特性的問題 <layer v-model="showLayer" @sure="yesFn" :btn="['肯定使用', '放棄']" :content="'歡迎使用vue2-layer-mobile'"> <div class="input-pwd-layer"> <h2 class="f16 gray">請輸入支付密碼</h2> <div class="int-pwd-outer"> <input @input="changeFn($event)" type="password" class="int-pwd" maxlength="6"> </div> </div> </layer> export default { data() { return { showLayer: true } } } 

plugin形式調用

// 詢問層 const index = this.$layer.open({ btn: ['確認', '取消'], content: 'hello word', className: 'good luck1', shade:true, success(layer) { console.log('layer id is:',layer.id) }, yes(index, $layer) { console.log(arguments) // 函數返回 false 能夠阻止彈層自動關閉，須要手動關閉 // return false; }, end() { console.log('end') } }) // 關閉層 this.$layer.close(index) // loading層 const index = this.$layer.open({ type:2, content: '加載中...', success(layer) { console.log('layer id is:',layer.id) }, end() { console.log('end') } }) // 底部對話框 this.$layer.open({ content: '這是一個底部彈出的詢問提示', btn: ['刪除', '取消'], skin: 'footer', yes: (index) => { this.$layer.open({content: '執行刪除操做'}) } }) // 頁面層 this.$layer.open({ type: 1, content: '可傳入任何內容，支持html。通常用於手機頁面中', anim: 'up', // 特別注意，這個styles屬性跟 layer-mobile 有點區別多加了個s，由於style在vue中是保留關鍵詞 styles: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;' }) 

擴展方法

如下方法均可以經過 this.$layer.open 這個方法來實現.

提示層(msg)

this.$layer.msg('hello world', () => console.log('end!!!')) 

信息層(alert)

this.$layer.alert('您肯定要刷新頁面嗎', () => window.location.reload()) 

詢問層(confirm)

const index = this.$layer.confirm('您肯定要刪除嗎？', () => alert('yes'), () => alert('no')) setTimeout(() => { this.$layer.close(index) }, 3000) 

API

Props

參數	說明	類型	可選值	默認值
type	彈層的類型	Number	0表示信息框，1表示頁面層，2表示加載層	0
content	彈層內容	String	必選參數	無
title	彈層標題	String或Array	值能夠爲字符串或者數組
time	控制自動關閉層所需秒數	Number	整數和浮點數	默認不開啓
styles	自定義層的樣式	String	如'border:none; color:#fff;'
skin	彈層顯示風格	String	footer（即底部對話框風格）、msg（普通提示）
className	自定義一個css類	String	custom-class
btn	按鈕	String/Array	字符串或者數組(目前最多支持兩個)
anim	動畫類型	String/Boolean	scale（默認）、up（從下往上彈出），若是不開啓動畫，設置false便可	scale（默認）
shade	控制遮罩展示	Boolean	true/false	true
shadeClose	是否點擊遮罩時關閉層	Boolean	true/false	true
fixed	是否固定層的位置	Boolean	true/false	true
top	控制層的縱座標	Number	整數和浮點數（通常狀況下不須要設置，由於層會始終垂直水平居中，只有當fixed: false時top纔有效）	無
success	層成功彈出層的回調（只要以插件形式使用纔有效），該回調參數返回一個參數爲當前層元素對象	Function	Function/null	null
yes	點肯定按鈕觸發的回調函數，返回一個參數爲當前層的索引（只要以插件形式使用纔有效）	Function	Function/null	null
no	點取消按鈕觸發的回調函數（只要以插件形式使用纔有效）	Function	Function/null	null
end	層完全銷燬後的回調函數（只要以插件形式使用纔有效）	Function	Function/null	null

Slots

name	描述
default	彈出框的內容

Events

name	說明	回調參數
sure	點擊確認按鈕時觸發	無
cancel	點擊取消按鈕時觸發	無
show	彈窗可見時觸發	無
close	彈窗關閉時觸發	無

這些事件不適用於以插件形式調用的事件監聽處理（它有本身的處理事件方法見以上api如yes、no等）

插件形式的內置方法/屬性

返回當前使用的layer mobile版本號

this.$layer.v

用於關閉特定層，index爲該特定層的索引

layer.close(index)

關閉頁面全部layer的層

layer.closeAll()

說明

1.參數(options)

style改爲styles

shade不支持自定義透明度與背景色

特別注意，這個styles屬性跟 layer-mobile 有點區別多加了個s，由於style在vue中是保留關鍵詞

2.擴展方法[msg、alert、confirm] 只有當你調用以上擴展方法時，會自動給層添加一個css類'layui-m-'+方法名[msg、alert、confirm]

效果圖

利用 slot 自定義彈層

信息彈層

提示

底部提示彈層

詢問彈層