<template>

    <div class="modal-container" :style="{bottom:type=='isHome'?'0.98rem':'0rem'}" @touchstart.stop.prevent="" v-show="visible">
        <transition name="slide-up">
            <div class="modal"  v-show="visible">
                {{msg}}
            </div>
        </transition>
    </div>

</template>
<script>
import progressbar from '../progressbar'
export default {
    name: 'progress-dialog',
    created() { },
    mounted() {
        this.visible = true
    },
    data() {
        return {
            type:'isBottom',
            msg: '正在加载数据',
            visible: false
        }
    },
    computed: {

    },
    methods: {

        close() {
            this.visible = false
            this.$el.addEventListener('transitionend', this.destroyView)
        },
        destroyView() {
            this.$el.removeEventListener('transitionend', this.destroyView)
            this.$destroy(true)
            this.$el.parentNode.removeChild(this.$el)
        }
    },
    components: {
        progressbar
    }
}

</script>
<style lang="less" scoped>
.modal-container {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0.98rem;
    overflow: hidden;
}

.modal {
    width: 100%;
    height: 0.72rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(255, 255, 255, 1);
    font-size: 0.26rem;
    text-align: center;
    color: rgba(173, 173, 173, 1);
    line-height: 0.72rem;
}

.slide-up-enter,
.slide-up-leave-active {
    opacity: 0;
    transform: translateY(100%)
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.5s;
}



</style>
