|
|
|
<template>
|
|
|
|
<popup
|
|
|
|
type="dialog"
|
|
|
|
:z-index="zIndex"
|
|
|
|
:mask="true"
|
|
|
|
:center="true"
|
|
|
|
v-show="isVisible"
|
|
|
|
@mask-click="maskClick"
|
|
|
|
>
|
|
|
|
<div class="cube-dialog-main">
|
|
|
|
<span class="cube-dialog-close" v-show="showClose" @click="close"
|
|
|
|
><i class="cubeic-close"></i
|
|
|
|
></span>
|
|
|
|
|
|
|
|
<div :class="containerClass">
|
|
|
|
<h2 v-if="title || $slots.title" class="cube-dialog-title">
|
|
|
|
<slot name="title">
|
|
|
|
<p class="cube-dialog-title-def">{{ title }}</p>
|
|
|
|
</slot>
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<div class="cube-dialog-content">
|
|
|
|
<slot name="content">
|
|
|
|
<div class="cube-dialog-content-def">
|
|
|
|
<p v-html="content" v-if="content"></p>
|
|
|
|
</div>
|
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="cube-dialog-btns confirm-dialog-btns-wrapper"
|
|
|
|
:class="{ 'border-right-1px': isConfirm }"
|
|
|
|
>
|
|
|
|
<slot name="btns">
|
|
|
|
<a
|
|
|
|
:href="_cancelBtn.href"
|
|
|
|
class="cube-dialog-btn border-top-1px"
|
|
|
|
:class="{
|
|
|
|
'cube-dialog-btn_highlight': _cancelBtn.active,
|
|
|
|
'cube-dialog-btn_disabled': _cancelBtn.disabled
|
|
|
|
}"
|
|
|
|
v-if="isConfirm"
|
|
|
|
@click="cancel"
|
|
|
|
>{{ _cancelBtn.text }}</a
|
|
|
|
>
|
|
|
|
<a
|
|
|
|
:href="_confirmBtn.href"
|
|
|
|
class="cube-dialog-btn border-top-1px"
|
|
|
|
:class="{
|
|
|
|
'cube-dialog-btn_highlight': _confirmBtn.active,
|
|
|
|
'cube-dialog-btn_disabled': _confirmBtn.disabled
|
|
|
|
}"
|
|
|
|
@click="confirm"
|
|
|
|
>{{ _confirmBtn.text }}</a
|
|
|
|
>
|
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</popup>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { Popup } from "cube-ui";
|
|
|
|
import popupMixin from "cube-ui/src/common/mixins/popup";
|
|
|
|
import visibilityMixin from "cube-ui/src/common/mixins/visibility";
|
|
|
|
import localMixin from "cube-ui/src/common/mixins/locale";
|
|
|
|
|
|
|
|
const COMPONENT_NAME = "confirm-dialog";
|
|
|
|
const EVENT_CONFIRM = "confirm";
|
|
|
|
const EVENT_CANCEL = "cancel";
|
|
|
|
const EVENT_CLOSE = "close";
|
|
|
|
|
|
|
|
const defHref = "javascript:;";
|
|
|
|
|
|
|
|
const defConfirmBtn = {
|
|
|
|
textType: "ok",
|
|
|
|
active: true,
|
|
|
|
disabled: false,
|
|
|
|
href: defHref
|
|
|
|
};
|
|
|
|
|
|
|
|
const defCancelBtn = {
|
|
|
|
textType: "cancel",
|
|
|
|
active: false,
|
|
|
|
disabled: false,
|
|
|
|
href: defHref
|
|
|
|
};
|
|
|
|
|
|
|
|
const parseBtn = function(btn, defBtn) {
|
|
|
|
if (typeof btn === "string") {
|
|
|
|
btn = { text: btn };
|
|
|
|
}
|
|
|
|
const text = defBtn && this.$t(defBtn.textType);
|
|
|
|
return Object.assign({}, defBtn, { text }, { btn });
|
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: COMPONENT_NAME,
|
|
|
|
mixins: [popupMixin, visibilityMixin, localMixin],
|
|
|
|
props: {
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
default: "confirm"
|
|
|
|
},
|
|
|
|
title: {
|
|
|
|
type: String,
|
|
|
|
default: ""
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
type: String,
|
|
|
|
default: ""
|
|
|
|
},
|
|
|
|
showClose: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
confirmBtn: {
|
|
|
|
type: [Object, String],
|
|
|
|
default() {
|
|
|
|
return { ...defConfirmBtn };
|
|
|
|
}
|
|
|
|
},
|
|
|
|
cancleBtn: {
|
|
|
|
type: [Object, String],
|
|
|
|
default() {
|
|
|
|
return {
|
|
|
|
...defCancelBtn
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Popup
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
_confirmBtn() {
|
|
|
|
return parseBtn.call(this, this.confirmBtn, defConfirmBtn);
|
|
|
|
},
|
|
|
|
_cancelBtn() {
|
|
|
|
return parseBtn.call(this, this.cancelBtn, defCancelBtn);
|
|
|
|
},
|
|
|
|
isConfirm() {
|
|
|
|
return this.type === "confirm";
|
|
|
|
},
|
|
|
|
containerClass() {
|
|
|
|
return `cube-dialog-${this.type}`;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
maskClick(e) {
|
|
|
|
this.maskClosable && this.cancel(e);
|
|
|
|
},
|
|
|
|
confirm() {
|
|
|
|
if (this._confirmBtn.disabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.hide();
|
|
|
|
this.$emit(EVENT_CONFIRM, e);
|
|
|
|
},
|
|
|
|
cancel(e) {
|
|
|
|
if (this._cancelBtn.disabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.hide();
|
|
|
|
this.$emit(EVENT_CANCEL, e);
|
|
|
|
},
|
|
|
|
close(e) {
|
|
|
|
this.hide();
|
|
|
|
this.$emit(EVENT_CLOSE, e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.confirm-dialog-btns-wrapper {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|
