Как сделать модальное окно с подтверждением прав?

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

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

Шаг 1: Создайте компонент модального окна
Создайте новый компонент Vue.js, который будет представлять модальное окно. В этом компоненте вы можете определить HTML-разметку модального окна, а также логику его отображения и скрытия.

<template>
  <div v-if="isModalOpen" class="modal">
    <div class="modal-content">
      <h2>Подтверждение прав</h2>
      <p>Вы уверены, что хотите продолжить?</p>
      <div class="modal-buttons">
        <button @click="cancel">Отмена</button>
        <button @click="confirm">Подтвердить</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    cancel() {
      this.isModalOpen = false;
      // Действия при отмене
    },
    confirm() {
      this.isModalOpen = false;
      // Действия при подтверждении
    }
  }
};
</script>

Шаг 2: Используйте компонент модального окна
Теперь вы можете использовать новый компонент модального окна внутри своего компонента или представления, где требуется подтверждение прав. Для открытия модального окна вызывайте метод openModal(), и для закрытия - метод closeModal().

<template>
  <div>
    <!-- some content -->
    <button @click="openModal">Показать модальное окно</button>
    <Modal v-if="showModal" @close="closeModal" />
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

Этот пример показывает кнопку "Показать модальное окно" и использует v-if директиву для условного рендеринга модального окна компонента. При нажатии на кнопку модальное окно будет открыто, а затем закрыто при нажатии на кнопки "Отмена" или "Подтвердить".

Шаг 3: Передача данных и действия
В компоненте модального окна добавьте входные параметры (props), если вам нужно передать в него данные или действия.

Также, в методах confirm() и cancel() вы можете определить действия, которые должны выполняться при подтверждении или отмене. Например, вы можете вызывать функции или выполнять запросы к серверу.

<template>
  <div v-if="isModalOpen" class="modal">
    <div class="modal-content">
      <h2>Подтверждение прав</h2>
      <p>{{ message }}</p>
      <div class="modal-buttons">
        <button @click="cancel">Отмена</button>
        <button @click="confirm">Подтвердить</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    cancel() {
      this.isModalOpen = false;
      // Действия при отмене
    },
    confirm() {
      this.isModalOpen = false;
      // Действия при подтверждении
    }
  }
};
</script>

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

Ваше модальное окно с подтверждением прав готово! Вы можете использовать этот компонент в любых частях вашего приложения, где необходимо отображать подобное модальное окно.