[vuejs] vue2.0-layer-mobile移動端彈層
阿新 • • 發佈:2018-09-07
alert 彈窗關閉 console this 初始 lob 支持 默認 hang
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 自定義彈層
信息彈層
提示
底部提示彈層
詢問彈層
[vuejs] vue2.0-layer-mobile移動端彈層