|
|
<script lang="ts" setup>
|
|
|
import { onBeforeMount, ref } from 'vue';
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
(e: 'commit')
|
|
|
}>()
|
|
|
const props = defineProps({
|
|
|
selectedTotal: {
|
|
|
type: Number,
|
|
|
default: () => 0,
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const show = ref(false)
|
|
|
const cardStyle = {
|
|
|
'width': '450px',
|
|
|
'--n-padding-top': '20px',
|
|
|
'--n-padding-bottom': '20px',
|
|
|
'--n-padding-left': '20px',
|
|
|
'--n-padding-right': '20px',
|
|
|
}
|
|
|
|
|
|
function showModal() {
|
|
|
show.value = true
|
|
|
}
|
|
|
|
|
|
function closeModal() {
|
|
|
show.value = false
|
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
|
showModal,
|
|
|
})
|
|
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
e.preventDefault()
|
|
|
closeModal()
|
|
|
emit('commit')
|
|
|
}
|
|
|
|
|
|
onBeforeMount(async () => { })
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<n-modal v-model:show="show" transform-origin="center">
|
|
|
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
|
|
<div class="wrapper">
|
|
|
<div class="wrapper-header">
|
|
|
<SvgIcon name="exclamation-solid" size="16" />
|
|
|
<span class="wrapper-left">确认提示</span>
|
|
|
</div>
|
|
|
<div class="wrapper-content">
|
|
|
已选<span class="highlighted-text">{{ props.selectedTotal }}</span>张图片，确认将所选照片移除可疑夹吗？
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="wrapper-footer">
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
确定
|
|
|
</n-button>
|
|
|
<n-button secondary style="margin-left:15px" @click="closeModal">
|
|
|
取消
|
|
|
</n-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</n-card>
|
|
|
</n-modal>
|
|
|
</template>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.wrapper {
|
|
|
&-header {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
&-left {
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
margin-left: 15px;
|
|
|
color: #8e8e8e;
|
|
|
|
|
|
.highlighted-text {
|
|
|
color: #5b85f8;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-footer {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
|
|
|
border: 0px;
|
|
|
}
|
|
|
|
|
|
::v-deep(.n-card > .n-card-header) {
|
|
|
--n-padding-top: 0px;
|
|
|
--n-padding-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
::v-deep(.n-divider:not(.n-divider--vertical)) {
|
|
|
margin-top: 0px;
|
|
|
margin-bottom: 0px;
|
|
|
}
|
|
|
</style>
|
