dootask/resources/assets/js/components/NetworkException.vue

<template>
    <div class="common-network-exception">
        <Alert v-if="type==='alert' && show" type="error" show-icon closable>{{$L('网络连接失败，请检查网络设置。')}}</Alert>
        <Modal
            v-else
            v-model="show"
            :width="416"
            :closable="false"
            :footer-hide="true"
            class-name="common-network-exception-modal">
            <div class="ivu-modal-confirm">
                <div class="ivu-modal-confirm-head">
                    <div class="ivu-modal-confirm-head-icon ivu-modal-confirm-head-icon-error"><Icon type="ios-close-circle"/></div><div class="ivu-modal-confirm-head-title">{{$L('温馨提示')}}</div>
                </div>
                <div class="ivu-modal-confirm-body">
                    <div>{{$L('网络连接失败，请检查网络设置。')}}</div>
                </div>
                <div class="ivu-modal-confirm-footer">
                    <Button type="primary" @click="show = false">{{$L('确定')}}</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import {mapState} from "vuex";

export default {
    name: 'NetworkException',
    props: {
        type: {
            type: String,
            default: 'modal'
        },
    },
    data() {
        return {
            show: false,
        }
    },

    beforeDestroy() {
        this.show = false
    },

    computed: {
        ...mapState([ 'ajaxNetworkException' ]),
    },

    watch: {
        ajaxNetworkException: {
            handler(v) {
                this.show = v;
            },
            immediate: true
        }
    }

};
</script>