shuju_ui/test/_components/func/hPopup.vue

<template>
    <!--弹出层 -->
    <view class="hPopup animate posi-fixed"    :class="(is_show || forbidden_event)   ?'dis-none dis-block':' dis-none'">
        <div class="wrap posi-fixed"
             @tap.stop.prevent="hide()"
             :style="{top:h_global.getStatusBarHeight('px')}">

            <div class="inner  animated fast" :class="animate_class" @tap.stop>
                <slot></slot>
            </div>

        </div>


    </view>

</template>

<script>
    export default {
        name: "hPopup",

        data() {
            return {
                animate:'',
                is_show:false
            }

        },

        computed:{
            /*动画的名字 依托于animatecss*/
            animate_class(){
                let mode = this.mode;
                let animate_obj = {
                    left:'fadeInLeftBig',
                    top:'fadeInDownBig',
                    right:'fadeInRightBig',
                    bottom:'fadeInUpBig',
                    center:'fadeIn',
                }
                return animate_obj[mode]

            },


        },
        props:{
            mode:{
                default:'center',//top / right / bottom / center//left
            },
            forbidden_event:{
                default:false,//禁用事件
            }
        },
        methods: {
            show(){
                if(this.forbidden_event){
                    return false;
                }
                this.is_show = true;
                this.$emit('popupShow',{})
            },
            hide(){
                if(this.forbidden_event){
                    return false;
                }
                this.is_show = false;
                this.$emit('popupHide',{})
            }
        },
        mounted(){

        }
    }
</script>

<style scoped lang="scss">

    .wrap{
        background: rgba(0, 0, 0, 0.59);
        z-index: 9999;

    }
</style>
评论 ( 0 )