chat-pc/src/components/confirm-box/index.vue

<script setup>
import { ref, watch } from 'vue'
import XNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
const emit = defineEmits(['cancel','confirm'])
const show=defineModel('show')
const props = defineProps({
  title:{
    type:String,
    default:'提示'
  },
  content:{
    type:String,
    default:'内容'
  },
  cancelText:{
    type:String,
    default:'取消'
  },
  confirmText:{
    type:String,
    default:'确定'
  }
})


</script>

<template>
    
  <XNModal v-model:show="show" :closable="false" class="w-724px"    content-style="padding:0px"  @after-leave="emit('after-leave')">
   <div class="flex flex-col w-full px-25px pb-49px">
    <div class="text-20px text-#1F2225 w-full text-center border-b-1px border-b-solid border-b-#E9E9E9 py-20px">{{ title }}</div>
    <div class="py-60px text-center text-20px text-#1F2225">
        {{ content }}
    </div>
    <div class="flex w-full justify-center">
        <n-button color="#C7C7C9" class="text-14px text-#fff w-161px h-34px mr-10px"
          @click="() => { show=false; emit('cancel') }"
        >{{ cancelText }}</n-button>
        <n-button color="#46299D" class="text-14px text-#fff w-161px h-34px"
          @click="() => { show=false; emit('confirm') }"
        >{{ confirmText }}</n-button>
    </div>
   </div>
  </XNModal>
</template>

<style scoped>
</style>