0

Есть задача сделать модальные окна на сайте. В моём понимании, я должен положить компонент модального окна в App.vue, отлавливать событие, что кто то хочет его открыть и открывать. Но как передавать компоненты в это модальное окно?

Компонент модального окна

    <template>

      <!-- Modal -->
      <div class="modal fade" id="modalWrapper" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
          <div class="modal-content">
             /**
              * Здесь необходимо рендерить компонент который пришел аргументом 
              * в обработчик события openMainModal. 
              * Вроде того <someComponent><someComponent>
              */
          </div>
        </div>
      </div>

    </template>

    <script>
      import {eventEmitter} from '../main'

      export default {
        name: "Modal",

        data() {
          return {
          }
        },
        methods: {
          _openModalHandler(someComponent) {
            $('#modalWrapper').modal('show');
          }
        },
        created() {
          eventEmitter.$on('openMainModal', this._openModalHandler);
        }
      }
    </script>

    <style scoped>

    </style>

App.vue

<template>
  <div id="app">

    <nav class="navbar">...</nav>

    <div class="page-content-wrapper">
      <router-view></router-view>
    </div>

    // Компонент "Модальное окно"
    <modal></modal>

   </div>
</template>

<script>
  import Modal from './Controls/Modal'

  export default {
    components: {
      modal: Modal
    }
  }
</script>

<style lang="scss">

</style>

Любой компонент, который может открывать модалки.

Например карточка товара. При клике на кнопку предосмотр, мне нужно открыть модальное окно и отрендерить в нем компонент предосмотра и быстрой покупки.

<template>
  <div class="col-12 col-sm-6 col-lg-4">
        <img :src="'../../static/'+product.img" alt="">
        <h5 class="card-title product-title">{{product.title}}</h5>
          <a href="#" @click.prevent="openModal(product)" class="form-control btn btn-outline-info">
            <i class="far fa-eye"></i>
          </a>
  </div>
</template>

<script>
  import {eventEmitter} from '../../main'
  /**
   * Хочется 
   * import {productPreviewer} from '../Controls/Product/Previewer'
   */
  export default {
    name: "ProductCard",
    props: ['product'],
    methods: {
      openModal(product) {
        eventEmitter.$emit('openMainModal', productPreviewer);
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>

Иерархия

App.vue
 |
 +--Modal
 +--pages/Catalog
 +--Controls
     |
     +--Product
         |
         +--Card
         +--Previewer

Как такое реализовать? Или, если я вообще всё неправильно себе представляю, то как лучше сделать?

1
  • Если используете vuex можете использовать его для отслеживания изменений и наполнения контентом. А отслеживать через v-if. Если нет, как у вас сейчас, можно модальное окно генерировать в отдельных компонентах, где они вызываются. 10 фев 2019 в 13:04

1 ответ 1

0

Vuex

const dialog = {
  state: {
    show: false,
    data: {},
    title: "",
    component: ''
  },
  mutations: {
    DIALOG_CLOSE(state) {
      state.show = false;
      state.title = "";
      state.component = "";
      state.data = {};
    },
    DIALOG_SHOW(state, payload) {
      const type = payload.type
      state.show = true;
      state.data = payload.data;
      state.title = payload.title;
      state.component = typeDialog[type]
    }
  },
  actions: {
    DIALOG_SHOW({commit}, payload){
      commit("DIALOG_CLOSE");
      commit("DIALOG_SHOW", payload);
    }
  }
};

Dialog.vue

<template>
  <section v-if="$store.state.dialog.show" >
    <div  :style="{height, width}">
      <div  v-if="title">
        <div >{{title}}</div>
        <Icon  name="circle-close" @click.native="closeDialogWindow"></Icon>
      </div>
      <components  @set-height="setHeight" :is="$store.state.dialog.component" :data="$store.state.dialog.data"></components>
    </div>
  </section>
</template>

<script>
import DialogContent from "./DialogContent";

export default {
  name: "DialogWindow",
  components: { ...DialogContent },
  data() {
    return {
      height: "90%",
      width: "90%"
    };
  },
  computed: {
    title(){
      return this.$store.state.dialog.title;
    }
  },
  methods: {
    closeDialogWindow() {
      this.$store.commit("DIALOG_CLOSE");
    },
    setHeight(e){
      this.height = e.height;
      this.width = e.width;
    }
  },
};
</script>

/DialogContent/Message.vue

<template>
  <div class="message">
    <div class="message__content">{{data.txt}}</div>
    <div class="message__answer">
      <div class="ok" @click="closeDialogWindow">OK</div>
    </div>
  </div>
</template>

<script>
import glossary from "@/components/mixins/glossary.vue";

export default {
  name: "Message",
  props: {
    data: Object
  },
  created() {
    this.$emit("set-height", { width: "50%", height: "50%" });
  },
  data() {
    return {};
  },
  methods: {
    closeDialogWindow() {
      this.$store.commit("DIALOG_CLOSE");
    }
  },
};
</script>

В нужный момент диспатчите открытие окна с нужными данными и модальное окно откроется

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.