2

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

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

4

3 回答 3

1

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

<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 官方文档中列出。

于 2021-02-10T22:45:02.787 回答
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>
于 2018-11-08T15:43:49.657 回答
0

通过 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>
于 2018-11-08T17:00:55.603 回答