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

來源:互聯網
上載者:User

標籤: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移動端彈層

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: