qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/message/Confirm.vue

<template>
    <popup ref="Message" :show="show">
        <div class="ui-message ui-message-confirm" :style="{width:$lang=='zh'?'400px':'auto'}" :class="[isMaterial?'message-material':'dark']">
            <div class="ui-message-header" :class="{'header-material':isMaterial}">
                <span>{{title}}</span>
                <span @click="onNo" v-if="showCloseIcon">
                    <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}" v-if="okLink">
                <a
                    :href="noLink"
                    target="_blank"
                    class="ui-button link cancel"
                    @click="onNo"
                >{{noText}}</a>
                <a
                    :href="okLink"
                    target="_blank"
                    class="ui-button link submit"
                    @click="onOk"
                >{{okText}}</a>
            </div>
            <div v-else class="ui-message-footer"  :class="{'footer-material':isMaterial}">
                <button class="ui-button cancel" :class="{deepcancel:!isMaterial}" @click="onNo">{{noText}}</button>
                <button class="ui-button submit" @click="onOk">{{okText}}</button>
                <button v-if="ok2" class="ui-button submit" @click="onOk2">{{ok2Text}}</button>
            </div>
        </div>
    </popup>
</template>
<script>
import {i18n} from "@/lang"
import Popup from "../popup";
export default {
    name: "ui-confirm",
    components: {
        Popup
    },
    data() {
        return {
            isMaterial: window.location.pathname.indexOf('material.html')>-1 || window.location.pathname.indexOf('showMobile.html')>-1 || window.location.pathname.indexOf('show.html')>-1,
            show: false,
            showCloseIcon: true,
            duration: 0,
            title: i18n.t("tips.title"),
            tips: "",
            icon: null,
            content: "",
            okText: i18n.t("common.set"),
            ok2Text: i18n.t("common.set"),
            noText: i18n.t("common.giveup"),
            okLink: null,
            noLink: null,
            ok: null,
            ok2: null,
            no: null
        };
    },
    methods: {
        onOk() {
            if (this.ok && this.ok(this) === false) {
                return;
            }
            this.onClose();
        },
        onOk2() {
          if (this.ok2 && this.ok2(this) === false) {
              return;
          }
          this.onClose();
        },
        onNo() {
            this.no && this.no();
            this.onClose();
        },
        onClose() {
            setTimeout(() => {
                this.show = false;
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.duration);
        }
    }
};
</script>

<style lang="less" scoped>
.ui-message {
    min-width: 400px;
  height: 230px;
}
</style>