admin-erahn/resources/js/components/util/Modal.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <transition name="fade">
      <div v-if="showModal" class="fixed z-10 inset-0 overflow-y-auto">
        <div
          class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
        >
          <div class="fixed inset-0 transition-opacity">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
          </div>
          <span
            class="hidden sm:inline-block sm:align-middle sm:h-screen"
          ></span
          >&#8203;
          <div
            class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-headline"
          >
            <div class="bg-white w-1/2 h-1/2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
              <div class="sm:flex sm:items-start">
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <h3
                    class="text-lg leading-6 font-medium text-gray-900"
                    id="modal-headline"
                  >
                    Modal title
                  </h3>
                  <div class="mt-2 flex flex-cols">

                        <div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
                            <span class="inline-block mr-5 align-middle text-xl">
                            <i class="fa fa-bell"></i>
                            </span>
                            <span class="inline-block mr-8 align-middle">
                            <b class="capitalize">{{ this.bakiawal }}</b>
                            
                            </span>
                        </div>

                        <div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
                            <span class="inline-block mr-5 align-middle text-xl">
                            <i class="fa fa-bell"></i>
                            </span>
                            <span class="inline-block mr-8 align-middle">
                            <b class="capitalize">{{ this.serahan }}</b>
                            
                            </span>
                        </div>


                        <div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
                            <span class="inline-block mr-5 align-middle text-xl">
                            <i class="fa fa-bell"></i>
                            </span>
                            <span class="inline-block mr-8 align-middle">
                            <b class="capitalize">{{this.pendahuluan}}</b>
                            
                            </span>
                        </div>


                        <div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
                            <span class="inline-block mr-5 align-middle text-xl">
                            <i class="fa fa-bell"></i>
                            </span>
                            <span class="inline-block mr-8 align-middle">
                            <b class="capitalize">ALERT</b>
                            
                            </span>
                        </div>


                  </div>
                </div>
              </div>
            </div>
            <div
              class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
            >
              <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                <button
                  type="button"
                  class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5"
                  @click="showModal = false"
                >
                  Close in red xd
                </button>
              </span>
              <span
                class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"
              >
                <button
                  type="button"
                  class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"
                  @click="showModal = false"
                >
                  Close
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- <p>Some text</p>
    <button
      @click="showModal = true"
      type="button"
      class="rounded-md bg-blue-500 hover:bg-blue-700 text-white py-2 px-4"
    >
      Show modal
    </button> -->
  </div>
</template>

<script>
export default {
    name:'modal',
    data: () => ({
        showModal: true,
        bakiawal: 0,
        baki: 0,
        pendahuluan: 0,
        serahan: 0,

    }),
    method:{
        ontrigger() {
            this.showModal = true;
            console.log('true');
        }
    }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transition: ease 0.2s;
}

.fade-leave-from,
.fade-enter-to {
  opacity: 1;
  transition: ease 0.2s;
}
</style>