How to remove OK button on modal in vuejs

Question

<div class="image-user">
     <img width="100px" src="/local/img/backend/user.jpeg" alt />
     <span @click="showModal()" class="see-more">See more...</span>
</div>

<a-modal
  :visible="visibleModal"
  @cancel="handleCancel"
  >
  <template slot="title">
     <div style="display: flex;">
       <span style="flex: 1;">TEST</span>
     </div>
  </template>
</a-modal>

<script>
import {Modal} from "ant-design-vue";
Vue.use(Modal);

export default {
 data() {
   return {
     visibleModal: false,
  }
 },
 showModal() {
   this.visibleModal = true;
 },
handleCancel() {
  this.visibleModal = false;
},


}
 </script>

Hello. I'm doing a function to view multiple photos, when I click on see more, a modal will appear on it that will show many photos. I made the modal display. But on it there are two buttons, cancel and OK, now I want to delete that OK button, how do I do that? Thank you

score 2 · Accepted Answer · answered Dec 10 '21 at 03:39

Use the footer slot:

<a-modal
  :visible="visibleModal"
  @cancel="handleCancel"
  >
  <template slot="title">
     <div style="display: flex;">
       <span style="flex: 1;">TEST</span>
     </div>
  </template>
  <template slot="footer">
     <a-button key="back" @click="handleCancel">
       Cancel
      </a-button>
  </template>
</a-modal>

How to remove OK button on modal in vuejs

1 Answers1