lingji-work-fe/src/components/confirm-button/index.vue

<!--
 * @Author: 田鑫
 * @Date: 2023-02-16 11:58:01
 * @LastEditors: 田鑫
 * @LastEditTime: 2023-02-16 16:56:27
 * @Description: 二次确认框
-->

<template>
  <div>
    <a-popconfirm
      :content="content"
      :position="position"
      :ok-text="okText"
      :cancel-text="cancelText"
      :type="popupType"
      @ok="handleConfirm"
      @cancel="handleCancel"
    >
      <slot></slot>
    </a-popconfirm>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue-demi';

type Position = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';

type PopupType = 'info' | 'success' | 'warning' | 'error';

const props = defineProps({
  content: {
    type: String,
    default: '是否确认？',
  },
  position: {
    type: String as PropType<Position>,
    default: 'top',
  },
  okText: {
    type: String,
    default: '确定',
  },
  cancelText: {
    type: String,
    default: '取消',
  },
  popupType: {
    type: String as PropType<PopupType>,
    default: 'info',
  },
});

const emit = defineEmits(['confirmEmit', 'cancelEmit']);

/**
 * 确定事件
 */
function handleConfirm() {
  emit('confirmEmit');
}
/**
 * 确定事件
 */
function handleCancel() {
  emit('cancelEmit');
}
</script>
<style lang="scss" scoped></style>