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

Slots

Events

這些事件不適用於以插件形式調用的事件監聽處理（它有自己的處理事件方法見以上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移動端彈層