[vue] Popup 컴포넌트 > IT 기술백서

[code]

<template>

  <div v-if="show" class="popup">

    <div class="card">

      <div class="card-body">

        <slot></slot>

      </div>

      <div class="card-footer">

        <div class="row">

          <div class="col text-left">

            <span for="today" class="today" @click="doTodayClose"

              >오늘 하루 보지 않기</span

            >

          </div>

          <div class="col text-right">

            <button type="button" class="btn btn-close" @click="doClose">

              <img src="~/assets/images/btn_close.png" />

              닫기

            </button>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

import Cookie from 'js-cookie'

export default {

  props: {

    cookieKey: {

      type: String,

      required: true,

      default: '',

    },

  },

  data() {

    return {

      show: false,

    }

  },

  mounted() {

    console.log(Cookie.get(this.key))

    if (Cookie.get(this.cookieKey) === undefined) {

      this.show = true

    }

  },

  methods: {

    doTodayClose() {

      Cookie.set(this.cookieKey, '1')

      this.show = false

    },

    doClose() {

      this.show = false

    },

  },

}

</script>

<style lang="scss" scoped>

.popup {

  display: block;

  position: fixed;

  z-index: 9;

  top: 20px;

  left: 50%;

  transform: translateX(-50%);

  .card {

    min-width: 300px;

    min-height: 300px;

    background-color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    .card-body {

      flex-grow: 1;

    }

    .card-footer {

      padding: 0.25rem;

      font-size: 0.9rem;

      vertical-align: middle;

      font-weight: bold;

      .btn {

        border: 0;

        background: inherit;

      }

      .today {

        cursor: pointer;

      }

    }

  }

}

</style>

[/code]

사용법

[code]

<popup cookie-key="sale">

  팝업내용

</popup> 

[/code]