display category and tags in article detail page

pycoder404 · pycoder404 · commit f4b24780e83b · 2022-07-26T09:27:46.000+08:00
diff --git a/src/views/article/components/ArticleTags.vue b/src/views/article/components/ArticleTags.vue
diff --git a/src/views/article/components/CategoryAndTag.vue b/src/views/article/components/CategoryAndTag.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <div class="article-category">
+            <span>分类: <router-link
+                    :to="{name:'articleListPage',query:{category:'Linux'}}">{{articleDetail.category}}</router-link></span>
+        </div>
+        <div class="article-tag">
+            <span>标签: </span>
+            <router-link
+                    v-for="tag in articleDetail.tags"
+                    :key="tag"
+                    :to="{name:'articleListPage',query:{tags:tag}}"
+            >
+                {{' ' + tag }}
+            </router-link>
+        </div>
+
+
+    </div>
+
+</template>
+
+<script>
+
+
+    export default {
+        name: 'CategoryAndTag',
+        components: {
+            // Upload,
+            // StickyNav,
+            // CommentDropdown,
+            // PlatformDropdown,
+            // SourceUrlDropdown
+        },
+        props: {
+            articleDetail: {
+                type: Object
+            }
+        },
+        data() {
+
+            return {
+                image_upload_url: 'http://10.89.228.206:28088/files/upload/',
+                // postForm: Object.assign({}, defaultForm),
+                loading: false,
+                tempRoute: {},
+                articleTags: [],
+                articleCategories: [],
+            }
+        },
+        created() {
+            // Why need to make a copy of this.$route here?
+            // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+            // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+            this.tempRoute = Object.assign({}, this.$route)
+        }
+    }
+
+</script>
+
+<style scoped>
+    .article-category {
+
+    }
+
+    .article-tag {
+
+    }
+
+</style>
diff --git a/src/views/article/components/LikeFavorite.vue b/src/views/article/components/LikeFavorite.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-icon><DeleteFilled /></el-icon>
+    <el-icon><PlusIcon /></el-icon>
 </template>
 
 <script>
diff --git a/src/views/article/detail.vue b/src/views/article/detail.vue
@@ -13,7 +13,7 @@
                 </div>
                 <div v-hlcode v-html="articleDetail.content"></div>
                 <el-divider></el-divider>
-
+                <category-and-tag :article-detail="articleDetail"></category-and-tag>
                 <like-favorite></like-favorite>
 
 
@@ -48,6 +48,7 @@
     // import SvgIcon from '@/components/SvgIcon/index'
 
     import LikeFavorite from "@/views/article/components/LikeFavorite";
+    import CategoryAndTag from "@/views/article/components/CategoryAndTag";
     //
     // const defaultForm = {
     //     status: 'draft',
@@ -65,7 +66,7 @@
     // }
     export default {
         name: "ArticleDetail",
-        components:{LikeFavorite},
+        components:{LikeFavorite,CategoryAndTag},
         data() {
             return {
                 articleDetail: {},
diff --git a/src/views/article/list.vue b/src/views/article/list.vue
@@ -28,7 +28,6 @@
                     </div>
                 </el-col>
             </el-row>
-            <!--        <el-divider style="margin: 10px 0;"/>-->
         </div>
     </div>
 
