Где я могу редактировать нижний колонтитул модального vue coreui? - PullRequest
Новая
       8

Где я могу редактировать нижний колонтитул модального vue coreui?

0 голосов
/ 08 ноября 2018

Я получаю некоторый код, как показано ниже, из шаблона 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

вопрос: Как я могу редактировать две кнопки (отмена и ОК) в нижнем колонтитуле этого модального?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Удалить кнопку через 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>
0 голосов
/ 08 ноября 2018

я знаю. это использовать слот,

Вы можете установить слот для нижнего колонтитула, как показано ниже

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

...