Vue.js 在哪里可以编辑modal vue coreui的页脚？

我从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>`

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
`

结果如下所示：

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

我知道。 这是使用插槽

您可以像下面的代码一样为页脚放置槽

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

模式页脚内容
接近

通过隐藏页脚删除按钮，按需要添加按钮。 在按钮上，我们使用float right类将按钮指向右侧。 例如：

开放模态
改变
试验
导出默认值{
方法：{
showModal（）{
此.$refs.myModalRef.show（）
},
可怕的（）{
这是.$refs.myModalRef.hide（）
}
}
}

对于任何在这个问题上遇到障碍的人，这里有另一个答案

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

通过删除此刮板，您将删除所有已删除的作业和结果
与此刮刀相关。


您确定要删除此刮板吗？
丢弃
接受

只需将template元素与要使用的槽的hashtag一起使用。在本例中，我使用了#footer来更改模式的页脚

---

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

您在哪里使用此

b-modal

？在

中，请共享所有代码？转到此链接，先生：）：插槽应为

slot=“footer”

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