纯手工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>