Package Exports

vue2-layer-mobile

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-layer-mobile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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]

效果图

效果图链接地址