如何在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>

您好。我正在做一个查看多张照片的功能，当我点击 see more 时，上面会出现一个显示很多照片的模式。我做了模态显示。但是上面有两个按钮，cancel和OK，现在我想删除那个OK按钮，怎么办？谢谢

Answer 1

使用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>

如何在vuejs中删除模态上的确定按钮

How to remove OK button on modal in vuejs

bootstrap-modal

vue.js