콘텐츠

- 내용, 태그를 3줄로 표시
- show more를 터치하면 전체내용 표시

package-lock.json

@@ -13,6 +13,7 @@
         "vue": "^2.6.11",
         "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
+        "vue-show-more-text": "^2.0.2",
         "vue2-editor": "^2.10.3",
         "vuedraggable": "^2.24.3",
         "vuejs-datetimepicker": "^1.1.13",
@@ -14602,6 +14603,15 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
+    "node_modules/vue-show-more-text": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-show-more-text/-/vue-show-more-text-2.0.2.tgz",
+      "integrity": "sha512-x/WuikWAx8Hm4gpZx6KHtJYiXDordGdSoXrd34lTiJeAnlT8Y7Yc0FfGBNdUv6mXncuET3LiRwwNz+X5gI+oiw==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -27443,6 +27453,15 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
+    "vue-show-more-text": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-show-more-text/-/vue-show-more-text-2.0.2.tgz",
+      "integrity": "sha512-x/WuikWAx8Hm4gpZx6KHtJYiXDordGdSoXrd34lTiJeAnlT8Y7Yc0FfGBNdUv6mXncuET3LiRwwNz+X5gI+oiw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -15,6 +15,7 @@
     "vue": "^2.6.11",
     "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",
+    "vue-show-more-text": "^2.0.2",
     "vue2-editor": "^2.10.3",
     "vuedraggable": "^2.24.3",
     "vuejs-datetimepicker": "^1.1.13",

src/views/Content/ContentList.vue

@@ -122,13 +122,19 @@
                   </td>
                   <td>{{ item.title }}</td>
                   <td style="max-width: 350px !important; word-break:break-all; height: auto;">
-                    {{ item.detail }}
+                    <vue-show-more-text
+                      :text="item.detail"
+                      :lines="3"
+                    />
                   </td>
                   <td>{{ item.curationTitle || '없음' }}</td>
                   <td>{{ item.creatorNickname }}</td>
                   <td>{{ item.theme }}</td>
                   <td style="max-width: 200px !important; word-break:break-all; height: auto;">
-                    {{ item.tags }}
+                    <vue-show-more-text
+                      :text="item.tags"
+                      :lines="3"
+                    />
                   </td>
                   <td v-if="item.price > 0">
                     {{ item.price }} 코인
@@ -369,11 +375,12 @@ import * as api from '@/api/audio_content'
 import * as dynamicLink from "@/api/firebase_dynamic_link";
 
 import VuetifyAudio from 'vuetify-audio'
+import VueShowMoreText from 'vue-show-more-text'
 
 export default {
   name: "AudioContentList",
 
-  components: {VuetifyAudio},
+  components: {VuetifyAudio, VueShowMoreText},
 
   data() {
     return {

src/views/Member/MemberList.vue

@@ -82,12 +82,13 @@
                         :src="item.profileUrl"
                         class="rounded-circle"
                       />
-                      <button
-                        class="download-button"
-                        @click="downloadImage(item.profileUrl)"
+                      <br>
+                      <a
+                        :href="item.profileUrl"
+                        class="v-btn v-btn--outlined"
                       >
-                        다운로드
-                      </button>
+                        Download Image
+                      </a>
                     </div>
                   </td>
                   <td>{{ item.userType }}</td>
@@ -365,26 +366,10 @@ export default {
 
       this.is_loading = false
       this.cancel()
-    },
-
-    async downloadImage(imageUrl) {
-      const link = document.createElement('a')
-      link.href = imageUrl
-      link.download = "image"
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
     }
   }
 }
 </script>
 
 <style scoped>
-.download-button {
-  margin-top: 5px;
-  background-color: #3bb9f1;
-  color: white;
-  padding: 10px;
-  border-radius: 10px;
-}
 </style>