宽高缓慢加载的弹窗

不太完善

<style lang="less" scoped>
    .pop{
        width: .1875rem;
        height: 0rem;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        overflow: hidden;
        background: darkgoldenrod;
        .rytContent{
            font-size: 16px;
            color:#333;
            box-sizing: border-box;
            padding: 0 30px 0 30px;
        }
        .parent{
            position: relative;
        }
    }
</style>
<template>
    <div class="pop" ref="pop">
        <div class="" v-if="show">
            <div @click="clearWidth">
                关闭
            </div>
            <div class="rytContent parent">
            	<!-- 具名插槽 -->
                <slot name="content"></slot>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    props:{
        maxWidth:{
            type:Number,
            default:80.5
        },//最大宽(百分比)
        maxHeight:{
            type:Number,
            default:50.6
        },//最大高(百分比)
        loadSpeedWidth:{
            type:Number,
            default:10
        },//加载宽速度（定时器时间）毫秒
        loadSpeedHeight:{
            type:Number,
            default:10
        },//加载高速度（定时器时间）毫秒
    },
    data() {
        return {
            width:3,//起始宽
            height:0,//起始高
            show:false,//是否显示
        }
    },
    mounted() {
        // console.log(Math.round(10.53))
        this.loadHeight()
    },
    methods: {
        //加载高
        loadHeight() {
            //获取元素
            let el = this.$refs.pop;
            let athis = this
            let time = setInterval(() => {
                athis.height++
                //给元素赋值
                el.style.height = `${athis.height}%`;
                //判断是否加载完（用Math.round四舍五入值）
                if (athis.height == Math.round(athis.maxHeight)) {
                    //给元素赋最终值
                    athis.height = athis.maxHeight
                    el.style.height = `${athis.height}%`;
                    //清除定时器
                    athis.clearTime(time)
                    //加载宽
                    athis.loadWidth()
                }
            }, athis.loadSpeedHeight);
        },
        //加载宽
        loadWidth(){
            //获取元素
            let el = this.$refs.pop;
            let athis = this
            let time = setInterval(() => {
                athis.width++
                //给元素赋值
                el.style.width = `${athis.width}%`;
                //判断是否加载完（用Math.round四舍五入值）
                if (athis.width == Math.round(athis.maxWidth)) {
                    //给元素赋最终值
                    athis.width = athis.maxWidth
                    el.style.width = `${athis.width}%`;
                    //清除定时器
                    athis.clearTime(time)
                    //显示内容
                    athis.show = true
                }
            }, athis.loadSpeedWidth);
        },
        //清除定时器
        clearTime(time){
            clearInterval(time)
        },
        //清除高
        clearHeight() {
            //获取元素
            let el = this.$refs.pop;
            let athis = this
            let time = setInterval(() => {
                athis.height = athis.height - 1
                //给元素赋值
                el.style.height = `${athis.height}%`;
                //判断是否加载完（用Math.round四舍五入值）
                if (Math.round(athis.height) == 0) {
                    //给元素赋最终值
                    athis.height = 0
                    el.style.height = `${athis.height}%`;
                    //清除定时器
                    athis.clearTime(time)
                }
            }, athis.loadSpeedHeight);
        },
        //清除宽
        clearWidth(){
            //获取元素
            let el = this.$refs.pop;
            let athis = this
            //隐藏内容
            athis.show = false
            
            let time = setInterval(() => {
                athis.width = athis.width - 1
                //给元素赋值
                el.style.width = `${athis.width}%`;
                //判断是否加载完（用Math.round四舍五入值）
                if (Math.round(athis.width) == 1) {
                    //给元素赋最终值
                    athis.width = 0.1
                    el.style.width = `${athis.width}%`;
                    //清除定时器
                    athis.clearTime(time)
                    //清除高
                    athis.clearHeight()
                }
            }, athis.loadSpeedWidth);
        },
    },
}
</script>

使用

<pop v-if="isPop" :maxWidth="75" :maxHeight="50">
 	<span slot="content">
        1232132131
	</span>
</pop>