Modal

filho.vue

<script>
export default {
  props: {
    title: {
      required: true,
      type: String,
    },
    open: false,
  },
  computed: {},
  mounted() {},
  methods: {
    close() {
      this.$emit('close', false)
    },
  },
  components: {},
}
</script>
<template>
  <div class="modal fade"
      :class="{ 'in modalOpened': open }">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button"
                        class="close"
                        @click="close()"></button>
                <h4 class="modal-title">{{ title }}</h4>
              </div>
              <div class="modal-body">
                <slot name="content"></slot>
              </div>
              <div class="modal-footer">
                <button @click="close()" type="button" class="btn dark btn-outline">Fecha</button>
                <slot name="confirm"></slot>
              </div>
          </div>
          <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
  </div>
</template>


<style>
  .modalOpened {
    display: block;
    padding-right: 15px;
  }
</style>

pai.vue

<script>
import appContainer from 'src/Container'
import modal from 'src/components/modal'

export default {
  data() {
    return {
      status: '',
      modalOpened: false,
    }
  },
  components: { appContainer, modal },
  mounted() {
    this.list()
  },
  methods: {
    openModal() {
      this.modalOpened = true
    },
    closeModal(value) {
      this.modalOpened = value
    },
    list() {
      const data = {
        deleted: false,
        classUID: 'general.Cidadao',
      }
      const criterion = {
        firstRegister: 0,
        maxRegisters: 50,
        orderBy: 'id',
        order: 'asc',
      }
      this.$request.getAll(data, criterion)
        .then(rest => { this.status = rest.status })
        .catch(rest => { this.status = rest })
    },
  },
}
</script>

<template>
  <app-container :modalOpened="modalOpened">
    <div slot="content" class="row">
      <div class="col-md-12">
        <div class="portlet light bordered">
          <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase font-dark">Pastas</span>
                <span class="caption-helper">sub título</span>
            </div>
            <div class="actions">
              <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                <i class="icon-settings"></i>
              </a>
            </div>
          </div>
          <div class="portlet-body">
              Conteúdo Fictício ( {{ status }} )
              <br><br>
              <a class="btn red btn-outline sbold"
                @click="openModal()"> Modal </a>
              <modal title="Título" :open="modalOpened" @close="closeModal">
                <div slot="content">
                  Conteúdo
                </div>
                <button slot="confirm" type="button" class="btn green">Confirma</button>
              </modal>
          </div>
        </div>
      </div>
    </div>
    <div slot="modal" v-if="modalOpened" class="modal-backdrop fade in"></div>
  </app-container>
</template>