ZhuHaiGaoXinQuUnmovable/src/components/message/Alert.vue

<template>
    <popup ref="Message" :show="show">
        <div class="ui-message ui-message-alert" :class="{'message-material':isMaterial,'message-mobile':isMobile}">
            <div class="ui-message-header" :class="{'header-material':isMaterial}">
                <span>{{title}}</span>
                <span @click="onClose">
                    <i class="iconfont icon_close"></i>
                </span>
            </div>
            <div class="ui-message-main" :class="{'main-material':isMaterial}">
                <div class="ui-message-icon" :class="[icon?icon:null]"></div>
                <div class="ui-message-title">{{tips}}</div>
                <div class="ui-message-content" v-html="content"></div>
            </div>
            <div class="ui-message-footer" :class="{'footer-material':isMaterial}">
                <button class="ui-button submit" @click="onOk">{{okText}}</button>
            </div>
        </div>
    </popup>
</template>
<script>
import {i18n} from "@/lang"
import Popup from "../popup";
import config from '@/config'
export default {
    name: "ui-alert",
    components: {
        Popup
    },
    data() {
        return {
            isMaterial: window.location.pathname.indexOf('material.html')>-1,
            isMobile:config.isMobile(),
            show: false,
            forceOK:false,
            duration: 0,
            title: i18n.t("tips.title"),
            icon: null,
            tips: "",
            content: "",
            okText: i18n.t("common.set"),
            ok: null
        };
    },
    methods: {
        onOk() {
            if (this.ok && this.ok(this) === false) {
                return;
            }
            setTimeout(() => {
                this.show = false;
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.duration);
        },
        onClose() {
            this.forceOK && (this.ok && this.ok(this) === false)
            setTimeout(() => {
                this.show = false;
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.duration);
        }
    }
};
</script>