40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<template>
|
|
<div class="aa-modal-mask" v-if="visible" @click.self="emit('cancel')">
|
|
<div class="aa-confirm" :class="confirmType === 'danger' ? 'is-danger' : 'is-primary'">
|
|
<div class="aa-confirm-head">
|
|
<span class="aa-confirm-icon">!</span>
|
|
<div class="aa-confirm-title">{{ title }}</div>
|
|
</div>
|
|
<div class="aa-confirm-content">{{ content }}</div>
|
|
<label v-if="dontAsk" class="aa-confirm-extra">
|
|
<input type="checkbox" v-model="dontAskChecked" /> 不再提示
|
|
</label>
|
|
<div class="aa-confirm-footer">
|
|
<button class="aa-confirm-btn" :disabled="loading" @click="emit('cancel')">{{ cancelText }}</button>
|
|
<button class="aa-confirm-btn" :class="confirmType === 'danger' ? 'danger' : 'primary'"
|
|
:disabled="loading" @click="emit('confirm', dontAskChecked)">
|
|
{{ loading ? '处理中…' : confirmText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
title: { type: String, default: '确认操作' },
|
|
content: { type: String, default: '' },
|
|
confirmType: { type: String, default: 'danger' },
|
|
confirmText: { type: String, default: '确定' },
|
|
cancelText: { type: String, default: '取消' },
|
|
loading: { type: Boolean, default: false },
|
|
dontAsk: { type: Boolean, default: false }
|
|
});
|
|
const emit = defineEmits(['cancel', 'confirm']);
|
|
const dontAskChecked = ref(false);
|
|
</script>
|
|
|
|
<style src="./ConfirmModal.css"></style>
|