我在哪里可以编辑模态 vue coreui 的页脚？

Question

我从 coreui vue 模板中得到了如下代码，

<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal>`

结果如下：

https://i.stack.imgur.com/8qPLJ.png

问题：我如何编辑该模式页脚中的两个按钮（取消和确定）？

Answer 1

我知道。这是要使用插槽，

你可以像下面的代码一样放置页脚的插槽

<div slot="modal-footer" class="w-100">
   <p class="float-left">Modal Footer Content</p>
   <b-btn size="sm" class="float-right" variant="primary" @click="show=false">
      Close
   </b-btn>
</div>

Answer 2

通过隐藏页脚删除按钮，按您想要的方式添加按钮。在按钮上，我们使用 float-right class 将按钮指向右侧。示例：

<template>
  <div>
    <b-button @click="showModal">
      Open Modal
    </b-button>
    <b-modal ref="myModalRef" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h3>Alteration</h3>
      </div>
      <b-btn class="float-right" @click="hideModal">Test</b-btn>
    </b-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal () {
        this.$refs.myModalRef.show()
      },
      hideModal () {
        this.$refs.myModalRef.hide()
      }
    }
  }
</script>

Answer 3

对于遇到这个问题的任何人，这是另一个答案。

<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
            By deleting this scraper, you will delete all the jobs and results that
            are related to this scraper.<br><br>
            <span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
            <div slot="footer" class="w-100">
                <CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" @click="dangerModal = true">
                    <i class="fas fa-trash"></i>
                </CButton>
                <CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" @click="dangerModal = true">
                    <i class="fas fa-trash"></i>
                </CButton>
            </div>
        </CModal>

通过添加带有广告位名称的 div 元素。

或

你可以这样做，这样更干净、更容易：

<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
            By deleting this scraper, you will delete all the jobs and results that
            are related to this scraper.<br><br>
            <span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
            <template #footer>
                <CButton @click="dangerModal = false" color="danger">Discard</CButton>
                <CButton @click="dangerModal = false" color="success">Accept</CButton>
            </template>
        </CModal>

只需将模板元素与您要使用的广告位的标签一起使用即可。在这种情况下，我做了#footer，以更改模式的页脚。

插槽名称列在官方 CoreUI Vue 文档中 here。

我在哪里可以编辑模态 vue coreui 的页脚？

Where I can edit footer of modal vue coreui?

vue.js

core-ui