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

<p class="error_text" :style="{color: fontColor}">{{errorText}}</p>

</section>

</div>

</template>

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>

/*.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>

<hint-modal v-show="error" :fontColor='fontColor' :errorText="errorText"></hint-modal>

import hintModal from '../components/common/hintModal'

data () {

return {

error: false,

errorText: null,

fontColor: null,

}

~~~

hintModal.errorPop(this, '登录成功', false, function(){

self.$router.push({ path: '/' });

});

</script>

效果图

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

在页面内调用方法

发表评论取消回复

微信