[code]
<template>
<div v-if=”show”>
<div>
<div>
<slot></slot>
</div>
<div>
<div>
<div>
<span for=”today” @click=”doTodayClose”
>오늘 하루 보지 않기</span
>
</div>
<div>
<button type=”button” @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]
