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

標籤：imp   刪除   maxlength   skin   exp   http   bool   ast   類型   

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)

APIProps

參數	說明	類型	可選值	預設值
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 自訂彈層

資訊彈層

提示

底部提示彈層

詢問彈層

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