Img preview added

DeepViolet777 · Sep 26, 2022 · 89f12d4 · 89f12d4
1 parent 01864d0
commit 89f12d4
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 77 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -33,7 +33,6 @@ export default {
             try {
                 const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
                 this.posts = response.data;
-                console.log(response)
             } catch (error) {
                 console.log(error)
             }
@@ -69,4 +68,17 @@ body {
     min-height: 100vh;
 
 }
+.btn {
+    align-self: flex-end;
+    margin-top: 15px;
+    background-color: #01579b; //#096683; // #0597c4;
+    //  border: 2px solid #096683;
+    border-radius: 2px;
+    border: none;
+    font-weight: 500;
+    color: #fff;
+    cursor: pointer;
+  
+    }
+
 </style>
diff --git a/src/components/PostForm.vue b/src/components/PostForm.vue
@@ -12,28 +12,20 @@
         <!-- <span class="helper-text" data-error="Введите текст"></span> -->
         <!-- <textarea class="input input-textarea validate" placeholder="Текст поста" v-model="post.body" required /> -->
         <!-- <input type="file" name="" id="" @change="checkFile($event)" > -->
-        <div class="file-field input-field">
-            <div class="btn btn-file">
-                <i class="material-icons">attach_file</i>
-                <span>Загрузить фото</span>
-                <input type="file">
-            </div>
-            <div class="file-path-wrapper">
-                <input class="file-path validate" type="text">
-            </div>
-        </div>
+
+        <img-loader/>
         <button type="submit" class="waves-effect waves-light light-blue darken-4 btn" :disabled="v$.$invalid" @click="createPost">Отправить</button>
     </form>
 </div>
 </template>
 
 <script>
 import useVuelidate from '@vuelidate/core'
-import {
-    required
-} from '@vuelidate/validators';
+import {required} from '@vuelidate/validators'
+import ImgLoader from '@/components/UI/ImgLoader.vue'
+
 export default {
-    //   mixins: [validationMixin],
+  components: { ImgLoader },
     setup() {
         return {
             v$: useVuelidate()
@@ -44,6 +36,7 @@ export default {
             post: {
                 title: "",
                 body: "",
+               
             }
 
         }
@@ -55,17 +48,18 @@ export default {
             this.$emit('create', this.post);
             this.post = {
                 title: "",
-                body: ""
+                body: "",
+                
             }
             this.v$.$reset();
-            this.$forceUpdate(); 
+            // this.$forceUpdate(); 
             const inputs = document.querySelectorAll(".input-text");
             inputs.forEach(input => {
-                input.classList.remove('valid')
-                
+                input.classList.remove('valid');
             });
-          
-        }
+
+        },
+       
 
     },
     validations: {
@@ -115,57 +109,6 @@ export default {
     }
 }
 
-.btn {
-    //width: 100px;
-    // padding: 10px 15px;
-    align-self: flex-end;
-    margin-top: 15px;
-    background-color: #01579b; //#096683; // #0597c4;
-    //  border: 2px solid #096683;
-    border-radius: 2px;
-    border: none;
-    font-weight: 500;
-    color: #fff;
-    cursor: pointer;
-    //transition: .2s;
-
-    //   &:hover {
-    //      background-color: #0277bd;//#0b799b;
-    //    }
-
-    //   &:active {
-    //       background-color: #039be5;//#0e96c0;
-    //    }
-
-    &-file {
-        display: flex;
-        justify-content: space-between;
-        font-size: 11px;
-        line-height: 3rem;
-        font-weight: 600;
-        vertical-align: middle;
-        padding-left: 5px;
-        padding-right: 10px;
-
-        i {
-            margin-right: 4px;
-        }
-
-    }
-}
-
-.file-field .btn {
-    height: 3rem;
-}
 
-//.materialize-textarea.invalid {
-//   border: 2px solid #F44336;
-//   box-shadow: 0 1px 0 0 #f44336;
-//}
 
-// .file-field input[type=file] {
-//   font-size: 12px;
-// font-weight: 500;
-//   height: 2rem;
-//}
 </style>
diff --git a/src/components/PostItem.vue b/src/components/PostItem.vue
@@ -8,19 +8,24 @@
             <p class="post-body">
                 {{post.body}}
             </p>
+            <div class="img_wrapper">
+                {{post.img}}
+            </div>
         </div>
         <div class="post-btns">
-            <button-delete @click="$emit('delete', post)"/>
+            <button-delete @click="$emit('delete', post)" />
         </div>
     </div>
 </div>
 </template>
 
 <script>
-import  ButtonDelete from "@/components/UI/ButtonDelete";
+import ButtonDelete from "@/components/UI/ButtonDelete";
 
 export default {
-    components: {ButtonDelete},
+    components: {
+        ButtonDelete
+    },
     props: {
         post: {
             type: Object,
@@ -44,13 +49,12 @@ export default {
     display: flex;
     //align-items: center;
     justify-content: space-between;
-    
 
     &-body {
         margin-top: 15px;
     }
 
-    h5{
+    h5 {
         display: block;
         width: 100%;
         height: auto;

diff --git a/src/components/UI/ImgLoader.vue b/src/components/UI/ImgLoader.vue
@@ -0,0 +1,83 @@
+<template>
+<div>
+    <div class="imagePreviewWrapper" :style="{ 'background-image': `url(${previewImage})` }" @click="selectImage">
+    </div>
+
+    <div class="file-field input-field">
+        <div class="btn btn-file">
+            <i class="material-icons">attach_file</i>
+            <span>Загрузить фото</span>
+            <input type="file" ref="fileInput" @input="pickFile" />
+        </div>
+        <div class="file-path-wrapper">
+            <input class="file-path validate" type="text">
+        </div>
+    </div>
+</div>
+</template>
+
+
+<script>
+export default {
+    name: "img-loader",
+    data() {
+        return {
+            previewImage: null
+        };
+    },
+    methods: {
+        selectImage() {
+            this.$refs.fileInput.click()
+        },
+        pickFile() {
+            let input = this.$refs.fileInput
+            let file = input.files
+            if (file && file[0]) {
+                let reader = new FileReader
+                reader.onload = e => {
+                    this.previewImage = e.target.result
+                }
+                reader.readAsDataURL(file[0])
+                this.$emit('input', file[0])
+            }
+        }
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.imagePreviewWrapper {
+    min-width: 250px;
+    min-height: 250px;
+    display: block;
+    cursor: pointer;
+    margin: 15px auto 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.btn {
+
+    &-file {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+        line-height: 3rem;
+        font-weight: 600;
+        vertical-align: middle;
+        padding-left: 5px;
+        padding-right: 10px;
+
+        i {
+            margin-right: 4px;
+        }
+
+    }
+
+    .file-field .btn {
+        height: 3rem;
+    }
+}
+</style>