MsgModal.vue 855 Bytes
<!-- 通过vue的modal增加一个拒绝填写message -->
<template>
  <!-- 一直显示 -->
  <Modal
    title="拒绝原因"
    width="30%"
    @cancel="handleClose"
    @ok="handleOk"
    visible
    wrapClassName="approve-modal"
  >
    <div className="pa-5">
      <a-textarea :rows="5" placeholder="请输入拒绝原因" v-model:value="message" />
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import { ref, defineEmits } from 'vue';
  import { Modal } from 'ant-design-vue';

  const emit = defineEmits(['msg-modal-close']);

  const message = ref('');

  const handleOk = () => {
    // 修改父组件的状态
    emit('msg-modal-close', message.value);
  };

  const handleClose = () => {
    // 修改父组件的状态
    emit('msg-modal-close');
  };
</script>

<style>
  .approve-modal {
    z-index: 99999;
  }
</style>