File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div v-if="pdfModal" class="modal-wrapper" role="dialog"
aria-modal="true">
<div class="modal-container">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2 class="page-sub-title">PDF미리보기</h2>
<button class="icon-btn black" title="pdf 미리보기" @click="PdfModalClose" aria-label="pdf preview">
<svg-icon type="mdi" :path="closePath" role="img" aria-labelledby="pdf preview"></svg-icon>
</button>
</div>
</div>
<div class="modal-content-monthly">
<vue-pdf-app :pdf="pdfurl" ></vue-pdf-app>
</div>
<div class="modal-end flex justify-end align-center">
<div class="gd-2 pl0 pr0">
<button @click="PdfModalClose" title="닫기" class="large-btn darkg-border-btn ml0">닫기</button>
</div>
</div>
</div>
</div>
</template>
<script>
import VuePdfApp from "vue3-pdf-app";
import { mdiWindowClose } from '@mdi/js';
export default {
props: {
url: {
type: String,
default: null,
},
modal : {
type: Boolean,
default: false,
}
},
data() {
return {
closePath:mdiWindowClose,
pdfModal : this.modal,
pdfurl : this.url
}
},
components: {
VuePdfApp
},
methods : {
PdfModalClose : function(){
this.pdfModal = false;
},
PdfModalOpen : function(){
this.pdfModal = true;
},
},
watch: {
modal: function (v) {
this.pdfModal = v;
},
url: function (v) {
this.pdfurl = v;
},
},
};
</script>
<style>
@import "https://unpkg.com/[email protected]/dist/icons/main.css";
</style>