99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<xNModal v-model:show="show" v-bind="$attrs">
|
||
|
|
<template #header>
|
||
|
|
<div class="custom-modal-header">
|
||
|
|
<div class="header-content">
|
||
|
|
<template v-if="$slots.header">
|
||
|
|
<slot name="header"></slot>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
{{ title }}
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<slot name="content"></slot>
|
||
|
|
<template #footer>
|
||
|
|
<div class="custom-modal-btns">
|
||
|
|
<customBtn color="#C7C7C9" style="width: 161px; height: 34px;" @click="handleCancel"
|
||
|
|
>取消</customBtn
|
||
|
|
>
|
||
|
|
<customBtn
|
||
|
|
color="#46299D"
|
||
|
|
style="width: 161px; height: 34px;"
|
||
|
|
@click="handleConfirm"
|
||
|
|
:loading="state.confirmBtnLoading"
|
||
|
|
>确定</customBtn
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</xNModal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive, computed } from 'vue'
|
||
|
|
import xNModal from '@/components/x-n-modal/index.vue'
|
||
|
|
import customBtn from '@/components/common/customBtn.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:show', 'cancel', 'confirm'])
|
||
|
|
|
||
|
|
const show = computed({
|
||
|
|
get: () => props.show,
|
||
|
|
set: (val) => emit('update:show', val)
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleCancel = () => {
|
||
|
|
show.value = false
|
||
|
|
emit('cancel')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleConfirm = () => {
|
||
|
|
state.confirmBtnLoading = true
|
||
|
|
emit('confirm', closeLoading)
|
||
|
|
}
|
||
|
|
|
||
|
|
const closeLoading = () => {
|
||
|
|
state.confirmBtnLoading = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const state = reactive({
|
||
|
|
confirmBtnLoading: false // 确定按钮loading
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.custom-modal-header {
|
||
|
|
border-bottom: 1px solid #e5e5e5;
|
||
|
|
margin: 0 30px;
|
||
|
|
|
||
|
|
.header-content {
|
||
|
|
padding: 0 0 15px;
|
||
|
|
text-align: center;
|
||
|
|
color: #1f2225;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 28px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-modal-btns {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 0 0 50px;
|
||
|
|
}
|
||
|
|
</style>
|