previsualizacion pdf

src/components/descripcion.vue

@@ -7,27 +7,27 @@
           Previsualizar
         </button>
 
-        <div v-if="Visible" @close="closeModal()">
-         <transition name="modal" >
-          <div class="modal-backdrop" @click.self="close()">
-            <div
-              class="modal"
-              role="dialog"
-              aria-labelledby="modalTitle"
-              aria-describedby="modalDescription"
-            >
-              <section class="modal-body rounded" id="modalDescription">
-                <iframe
-                  :src="PDF"
-                  width="100%"
-                  height="100%"
-                  frameborder="0"
-                ></iframe>
-              </section>
+        <modal v-if="Visible" @close="closeModal()">
+          <transition name="modal">
+            <div class="modal-backdrop" @click.self="closeModal()">
+              <div
+                class="modal"
+                role="dialog"
+                aria-labelledby="modalTitle"
+                aria-describedby="modalDescription"
+              >
+                <section class="modal-body rounded" id="modalDescription">
+                  <iframe
+                    :src="PDF"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                  ></iframe>
+                </section>
+              </div>
             </div>
-          </div>
-        </transition> 
-        </div>
+          </transition>
+        </modal>
         <br /><br />
         <div class="container">
           <div class="row izq">
@@ -113,7 +113,7 @@ import Title from "../components/titulo.vue";
 
 export default {
   components: {
-    Title,
+    Title
     //modal
   },
 
@@ -144,7 +144,7 @@ export default {
     close() {
       this.$emit("close");
     },
- 
+
     async descripcion(idLibro) {
       localStorage.clear();
       window.localStorage.setItem("idLibro", idLibro);
@@ -239,9 +239,7 @@ export default {
     } catch (error) {
       console.log(`Ocurrio un error ${error}`);
     }
-    
   }
-   
 };
 </script>
 

src/components/previsual.vue

@@ -1,99 +0,0 @@
-<template>
-  <transition name="modal">
-    <div class="modal-backdrop" @click.self="close()">
-      <div
-        class="modal"
-        role="dialog"
-        aria-labelledby="modalTitle"
-        aria-describedby="modalDescription"
-      >
-        <section class="modal-body rounded" id="modalDescription">
-          <iframe
-            :src="PDF"
-            width="100%"
-            height="100%"
-            frameborder="0"
-          ></iframe>
-        </section>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-//import axios from "axios";
-import config from "../config/config.js";
-
-export default {
-  props: ["pdfPre"], //RUTA.pdf
-  name: "modal",
-  methods: {
-    close() {
-      this.$emit("close");
-    }
-  },
-
-  data() {
-    return {
-      PDF: ""
-    };
-  },
-  async created() {
-    try {
-     
-      let nombre = window.localStorage.getItem("pdfVis");
-      console.log(`Ruta de pdf ${config.api}/PDFget/?nombrePDF=${nombre}`)
-      let path = `${config.api}/PDFget/?nombrePDF=${nombre}`;
-      this.PDF = path;
-      console.log(path);
-      console.log(config.api);
-      /*let PDF = await axios.get(`${config.api}/PDFget/${this.pdfPre}`, {
-           
-            responseType: 'blob', // 
-        })
-     
-     .then(response => {
-      
-       this.PDF = PDF
-   // this.user = response.data;
-    console.log("si se pudo", response.data)
-}).catch(e => {
-    console.log(e);
-})*/
-    } catch (error) {
-      console.log(`Ocurrio un error msj: ${error}`);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  background: #ffffff;
-  box-shadow: 2px 2px 20px 1px;
-  /* overflow-x: auto; */
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  width: 90%;
-  height: 90%;
-}
-
-.modal-body {
-  /* position: relative; */
-  padding: 20px 10px;
-}
-</style>