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

【问题标题】：Where I can edit footer of modal vue coreui?我可以在哪里编辑模态 vue coreui 的页脚？
【发布时间】：2018-11-08 13:38:37
【问题描述】：

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

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

【问题讨论】：

你在哪里使用这个b-modal？
在<div class="wrapper">
请分享所有代码？
gist.github.com/Rhyanz46/43f9f057a0bd832627312fd4aae859b8
转到此链接，先生 :) : link

标签： vue.js core-ui

【解决方案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>

【讨论】：

插槽应该是slot="footer"

【解决方案2】：

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

<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 中列出。

【讨论】：

【解决方案3】：

通过 hide-footer 移除按钮，按你想要的方式添加按钮。在按钮上，我们使用 float-right 类将按钮指向右侧。示例：

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

【讨论】：