120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<d-modal v-model="vModels" :title="title" class="repo-settings-modal" :showClose="showCloseIcon" :escapable="escapable" :close-on-click-overlay="closeByOverlay">
|
|
<template #header>
|
|
<gc-modal-header>
|
|
<Icon v-if="showWarnIcon" name="gt-warn" color="#F2050D" class="mr-[8px]"></Icon>
|
|
<span class="text-G900 text-base font-bold leading-[24px]">{{ title }}</span>
|
|
</gc-modal-header>
|
|
<div class="line bg-G200"></div>
|
|
</template>
|
|
<div v-if="warnText" class="px-24 py-[12px] bg-[#F2050D0C] text-[var(--color-R500)] text-sm font-normal leading-[20px]">
|
|
{{ warnText }}
|
|
</div>
|
|
<div class="pt-20 px-24 pb-24">
|
|
<slot></slot>
|
|
</div>
|
|
<template #footer v-if="showFooter">
|
|
<slot name="footerGroup"></slot>
|
|
<div class="flex justify-end px-[24px] pb-24" v-if="!customFooter">
|
|
<d-button @click="closeModal()" class="mr-[8px]">取消</d-button>
|
|
<d-button :loading="confirmLoading" :variant="confirmColor === 'primary' ? 'solid' : 'outline'" :color="confirmColor" @click="confirm" :disabled="disabledButton">
|
|
{{ confirmText }}
|
|
</d-button>
|
|
</div>
|
|
</template>
|
|
</d-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useModel } from '@/utils/hooks/useModel';
|
|
|
|
defineSlots<{
|
|
default?:() => any,
|
|
footerGroup?: () => any
|
|
}>();
|
|
|
|
const props = withDefaults(defineProps<{
|
|
modelValue?: any
|
|
'onUpdate:modelValue'?: Function
|
|
title?: string
|
|
warnText?: string
|
|
autoClose?: boolean
|
|
confirmText?: string
|
|
cancelText?: string
|
|
confirmColor?: 'primary' | 'danger'
|
|
showWarnIcon?: boolean
|
|
showFooter?: boolean
|
|
disabledButton?: boolean
|
|
customFooter?: boolean
|
|
showCloseIcon?: boolean
|
|
escapable?: boolean
|
|
closeByOverlay?: boolean,
|
|
confirmLoading?: boolean
|
|
}>(), {
|
|
title: '删除操作',
|
|
autoClose: true,
|
|
confirmText: '确定',
|
|
confirmColor: 'primary',
|
|
showFooter: true,
|
|
disabledButton: false,
|
|
customFooter: false,
|
|
showCloseIcon: true,
|
|
escapable: true,
|
|
closeByOverlay: true,
|
|
confirmLoading: false
|
|
});
|
|
|
|
const emits = defineEmits(['closeModal', 'confirm', 'update:modelValue']);
|
|
|
|
const { vModels } = useModel(props, emits);
|
|
|
|
const closeModal = () => {
|
|
emits('closeModal');
|
|
vModels.value = false;
|
|
};
|
|
|
|
const openModal = () => {
|
|
vModels.value = true;
|
|
};
|
|
const confirm = () => {
|
|
emits('confirm');
|
|
if (props.autoClose) {
|
|
vModels.value = false;
|
|
}
|
|
};
|
|
|
|
defineExpose({
|
|
openModal
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.repo-settings-modal {
|
|
width: 410px;
|
|
box-sizing: border-box;
|
|
padding: 0 0;
|
|
|
|
.devui-modal__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.tip-desc {
|
|
// @apply text-G900 px-[22px] my-[18px] leading-[28px] break-all;
|
|
}
|
|
.devui-modal__header {
|
|
padding: 14px 24px;
|
|
height: auto!important;
|
|
}
|
|
.btn-close {
|
|
right: 24px;
|
|
top: 16px;
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
}
|
|
</style>
|
|
|