纯手工vue.js模态提示框组件

vue.js模态提示框，多用在数据验证时给出一些友好提示，该组件包含了成功和失败时，两种不同的样式，还加入了提示结束之后执行回调函数。该组件为完整代码，复制即可用。欢迎批评指正~~

	<template>
	    <div class="error_container">
		    <section class="error_text_container">
	            <p class="error_text" :style="{color: fontColor}">{{errorText}}</p>
	        </section>
	    </div>
	</template>
	
	<script>
	    export default {
	    	data(){
	            return{
	            }
	        },
	        mounted(){
	
	        },
	        errorPop: function(obj, msg, isError=true, callback, delay=2000){
	            if (!msg || msg == null) {
	                msg = '系统错误';
	            }
	            if (isError) {
	                obj.fontColor = '#ffffff';
	            }else{
	                obj.fontColor = '#00ff00';
	            }
	            obj.error = true;
	            obj.errorText = msg;
	            obj.status = false;
	            setTimeout(function(){
	                obj.error = false;
	                obj.status = true;
	            }, delay);
	            let timer = setInterval(function(){
	                if(obj.status){
	                    clearInterval(timer);
	                    delete obj.status;
	                    if (typeof callback == 'function') {
	                        callback();
	                    }
	                }
	            },500);
	        },
	        props: ['errorText', 'fontColor'],
	        methods: {}
	    }
	</script>
	
	<style lang="stylus" scoped>
	    /*.error_container{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 200;
	    }*/
	    .error_text_container{
	        /*position: absolute;*/
	        position: fixed;
	        top: 40%;
	        left: 50%;
	        margin-left: -4.5rem;
	        width: 9rem;
	        animation: tipMove .4s ;
	        background-color: #b7b5b5;
	        opacity: .9;
	        border: 1px;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        flex-direction: column;
	        border: 1px;
	        border-radius: .25rem;
	        .error_text{
	            font-size: .8rem;
	            color: white;
	            line-height: .9rem;
	            text-align: center;
	            margin: 10% auto;
	        }
	    }
	</style>

在页面内调用方法

	<hint-modal v-show="error" :fontColor='fontColor' :errorText="errorText"></hint-modal>
	<script>
		import hintModal from '../components/common/hintModal'
		data () {
	            return {
	                error: false,
	                errorText: null,
	                fontColor: null,
	            }
	        },
	        ~~~
	        hintModal.errorPop(this, '登录成功', false, function(){
	                            self.$router.push({ path: '/' });
	                        });
	</script>