小程序弹出层

小程序多用弹出层！

---

WXML

<view class="pop pop-{{type}} {{show ? 'pop-show' : ''}}">
    <view wx:if="{{overlay}}" class="pop_mask {{showOverlay ? '' : 'pop_mask-hide'}}" bindtap="handleMaskClick">
    </view>
    <view class="pop_container">
        <slot></slot>
    </view>
</view>

CSS

.pop {
    visibility: hidden
}

.pop-show {
    visibility: visible
}

.pop_mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 14;
    background: rgba(0, 0, 0, .5);
    display: none;
}

.pop_mask-hide {
    background: none;
}

.pop_container {
    position: fixed;
    transition: all .2s ease;
    z-index: 15;
    opacity: 0;
}

.pop-show .pop_container {
    opacity: 1;
}

.pop-show .pop_mask {
    display: block;
}

.pop-left .pop_container {
    left: 0;
    top: 50%;
    transform: translate3d(-100%, -50%, 0);
}

.pop-show.pop-left .pop_container {
    transform: translate3d(0, -50%, 0);
}

.pop-right .pop_container {
    right: 0;
    top: 50%;
    left: auto;
    transform: translate3d(100%, -50%, 0);
}

.pop-show.pop-right .pop_container {
    transform: translate3d(0, -50%, 0);
}

.pop-bottom .pop_container {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 100%, 0);
}

.pop-show.pop-bottom .pop_container {
    transform: translate3d(-50%, 0, 0);
}

.pop-top .pop_container {
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -100%, 0);
}

.pop-show.pop-top .pop_container {
    transform: translate3d(-50%, 0, 0);
}

JS

Component({
    properties: {
        show: {
            type: Boolean,
            value: false
        },
        // 是否显示遮罩层
        overlay: {
            type: Boolean,
            value: true,
        },
        // 遮罩层是否显示透明黑色
        showOverlay: {
            type: Boolean,
            value: true,
        },
        type: {
            type: String,
            value: 'bottom'
        },
    },
    methods: {
        handleMaskClick(){
            this.triggerEvent('clickmask')
        }
    }   
})

DOME地址
gitee地址https://gitee.com/nantianbaiyun/popup.git