VueJs: Как повторно использовать модальный диалог начальной загрузки - PullRequest
Новая
       48

VueJs: Как повторно использовать модальный диалог начальной загрузки

0 голосов
/ 22 мая 2019

Я создал три простые кнопки, которые будут запускать три разных модальных диалога начальной загрузки. Модальные диалоговые окна: «Добавить продукт» , «Редактировать продукт» и «Удалить продукт» . Модальные диалоговые окна Add и Edit содержат форму с двумя элементами ввода, тогда как модальное диалоговое окно Delete содержит простой текст. Я понимаю, что мой код становится очень грязным и сложным в обслуживании. Отсюда у меня следующий вопрос:

1) Как использовать модальное диалоговое окно вместо создания 3 отдельных диалогов?

2) Как узнать, какой модальный диалог был запущен?

Обновление : я разработал соулмент, в который я включу условные операторы, такие как v-if, v-else-if и v-else , чтобы отслеживать, какая кнопка пользовательский клик. Тем не менее, я все еще чувствую, что есть лучшее решение для этого. Кто-нибудь может мне помочь / посоветовать?

Ниже мой текущий код: 

       <template>
  <div>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="addCalled()">Add</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="editCalled()">Edit</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="deleteCalled()">Delete</b-button>

    <!-- Modal Dialog for Add Product -->
    <b-modal id="product" title="Add Product">
      <div v-if="addDialog">
        <form @submit.stop.prevent="submitAdd">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity"></b-form-input>
        </b-form-group>
      </div>

      <div v-else-if="editDialog">
        <form @submit.stop.prevent="submitEdit">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue" :value="productName"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity" :value="productQuantity">5</b-form-input>
        </b-form-group>
      </div>

      <div v-else>
        <p class="my-4">Are You Sure you want to delete product?</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: "T-Shirt",
      productQuantity: 10,
      addDialog: false,
      editDialog: false,
      deleteDialog: false
    };
  },
  methods: {
    addCalled() {
      this.addDialog = true;
    },
    editCalled() {
      this.editDialog = true;
      this.addDialog = false;
      this.deleteDialog = false;
    },
    deleteCalled() {
      this.deleteDialog = true;
      this.addDialog = false;
      this.editDialog = false;
    }
  }
};
</script>

<style>
</style>

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Как уже упоминалось, я бы использовал слоты и динамический рендеринг компонентов, чтобы выполнить то, что вы пытаетесь сделать более чистым способом.

См. Фрагмент ниже (я не сделал их модальными как таковые, но идея та же самая).

Таким образом, вы можете иметь общий modal компонент, который работает с общимлогика или стили и столько подкомпонентов modalContent, сколько необходимо, которые вводятся через выделенный слот.

Vue.component('modal', {
  template: `
    <div>
      <h1>Shared elements between modals go here</h1>
      <slot name="content"/>
    </div>
  `
});


Vue.component('modalA', {
  template: `
    <div>
      <h1>I am modal A</h1>    
    </div>
  `
});

Vue.component('modalB', {
  template: `
    <div>
      <h1>I am modal B</h1>    
    </div>
  `
});

Vue.component('modalC', {
  template: `
    <div>
      <h1>I am modal C</h1>    
    </div>
  `
});


new Vue({
  el: "#app",
  data: {
    modals: ['modalA', 'modalB', 'modalC'],
    activeModal: null,
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button v-for="modal in modals" @click="activeModal = modal"> Open {{ modal }} </button>
  <modal>
    <template slot="content">
      <component :is="activeModal"></component>
    </template>
  </modal>
</div>
1 голос
/ 22 мая 2019

Обновление

Теперь вы можете подумать, как вы закроете свой модальный режим и сообщите об этом родительскому компоненту. При нажатии кнопки триггера closeModal для этого

Создайте метод - closeModal и внутри компонента commonModal и emit событие. 

closeModal() { 
  this.$emit('close-modal')
}

Теперь это будет генерировать пользовательское событие, которое может прослушиваться потребляющим компонентом.

Так что в вашем родительском компоненте просто используйте это пользовательское событие, например, следующее и закройте ваш модальный 

<main class="foo">
  <commonModal v-show="isVisible" :data="data" @close- modal="isVisible = false"/>
  <!-- Your further code -->
</main>

Так что по вашему вопросу

A - Как использовать модальное диалоговое окно вместо создания 3 отдельных диалогов

Создайте отдельный modal компонент, скажем, - commonModal.vue.

Теперь в вашем commonModal.vue, примите один prop, скажем, data: {}.

Теперь в разделе html commonModal 

<div class="modal">
  <!-- Use your received data here which get received from parent -->
  <your modal code />
</div>

Теперь импортируйте commonModal в потребительский / родительский компонент. Создайте свойство данных в родительском компоненте, скажем, - isVisible: false и вычисляемое свойство для data, которое вы хотите показать в modal let скажем, modalContent.

Теперь используйте это так 

<main class="foo">
   <commonModal v-show="isVisible" :data="data" />
   <!-- Your further code -->
</main>

Вышеуказанное поможет вам повторно использовать модальный режим, и вам просто нужно отправить data из родительского компонента.

Теперь второй вопрос также будет решен здесь Как узнать, какой модальный диалог был запущен?

Просто проверьте свойство isVisible, чтобы проверить, открыт modal или нет. Если isVisible = false, то ваш модал не виден и наоборот

...