✨ 文章延续阅读功能

components/widget/portfolios.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-row>
+
+    <el-col>
+      <el-col>
+        <h4>所属作品集</h4>
+      </el-col>
+      <el-col style="padding: 1rem">
+        <el-col v-for="portfolio in portfolios" :key="portfolio.idPortfolio" :xs="16" :xl="8">
+          <el-col :xs="4" :sm="4" :xl="4">
+            <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
+          </el-col>
+          <el-col :xs="20" :sm="20" :xl="20">
+            <el-link rel="nofollow" @click="showPortfolioPanel(portfolio)" :underline="false"
+                     class="text-default">{{ portfolio.portfolioTitle }}
+            </el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-col>
+    <el-col>
+      <el-drawer
+        :title="portfolio.portfolioTitle"
+        :visible.sync="drawer"
+        :direction="direction"
+        :show-close="false"
+        size="20%">
+        <el-col>
+          <el-button size="small" @click="onRouter(portfolio.idPortfolio)" style="margin: 0 5% 1rem 5%;">详情</el-button>
+        </el-col>
+        <el-col v-for="(article, index) in portfolio.articles" :key="article.idArticle" style="margin: 0.2rem 5%;">
+          <el-link v-if="article.idArticle === portfolio.idArticle" type="primary" :href="article.articlePermalink"
+                   :underline="false">{{ index + 1 }}. {{ article.articleTitle }}
+          </el-link>
+          <el-link v-else :id="article.idArticle" :href="article.articlePermalink" :underline="false">{{ index + 1 }}.
+            {{ article.articleTitle }}
+          </el-link>
+        </el-col>
+      </el-drawer>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "portfolios",
+  props: {
+    portfolios: []
+  },
+  data() {
+    return {
+      drawer: false,
+      direction: 'rtl',
+      portfolio: {}
+    }
+  },
+  methods: {
+    onRouter(data) {
+      this.$router.push(
+        {
+          path: `/portfolio/${data}`
+        }
+      )
+    },
+    showPortfolioPanel(portfolio) {
+      this.$set(this, 'drawer', true)
+      this.$set(this, 'portfolio', portfolio)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/article/_article_id.vue

@@ -19,7 +19,8 @@
                 </div>
               </el-col>
               <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
-                <el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
+                <el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span
+                  style="color: red;">{{ article.articleViewCount }}</span>
                 </el-link>
               </el-col>
               <el-col style="margin: 1rem 0;">
@@ -35,7 +36,9 @@
                 </el-col>
                 <el-col v-if="user" :span="12" style="text-align: right;">
                   <template v-if="user.idUser !== article.articleAuthorId">
-                    <el-button size="mini" v-if="isFollow" @click="cancelFollowUser(article.articleAuthorId)" plain>取消关注</el-button>
+                    <el-button size="mini" v-if="isFollow" @click="cancelFollowUser(article.articleAuthorId)" plain>
+                      取消关注
+                    </el-button>
                     <el-button size="mini" v-else @click="followUser(article.articleAuthorId)" plain>关注</el-button>
                   </template>
                   <el-button size="mini" v-if="hasPermissions" @click="handleCommand('edit')" plain>编辑文章</el-button>
@@ -47,26 +50,12 @@
                   <el-button size="mini" @click="handleCommand('share')" plain>分享</el-button>
                 </el-col>
               </el-col>
-              <el-col v-if="article.portfolios && article.portfolios.length > 0">
-                <el-col>
-                  <h4>所属作品集</h4>
-                </el-col>
-                <el-col style="padding: 1rem">
-                  <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :xs="16" :xl="8">
-                    <el-col :xs="4" :sm="4" :xl="4">
-                      <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
-                    </el-col>
-                    <el-col :xs="20" :sm="20" :xl="20">
-                      <el-link rel="nofollow" @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                               class="text-default">{{ portfolio.portfolioTitle }}
-                      </el-link>
-                    </el-col>
-                  </el-col>
-                </el-col>
-              </el-col>
               <el-col v-if="isShare" style="margin-bottom: 1rem;">
                 <share-box :url="shareData.shareUrl"></share-box>
               </el-col>
+              <el-col v-if="article.portfolios && article.portfolios.length > 0">
+                <portfolios-widget :portfolios="article.portfolios"></portfolios-widget>
+              </el-col>
             </el-row>
             <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
                  style="overflow: hidden;"></div>
@@ -91,15 +80,17 @@
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import ShareBox from '~/components/widget/share';
+import ShareBox from '~/components/widget/share';
-  import EditTags from '~/components/widget/tags';
+import PortfoliosWidget from '~/components/widget/portfolios';
+import EditTags from '~/components/widget/tags';
 
-  export default {
+export default {
   name: "ArticleDetail",
   components: {
     ShareBox,
+    PortfoliosWidget,
     EditTags
   },
   validate({params, store}) {
@@ -182,7 +173,7 @@
       isShare: false,
       dialogVisible: false,
       isFollow: false,
-        shareData: {},
+      shareData: {}
     }
   },
   methods: {
@@ -290,18 +281,18 @@
     }
   }
 
-  }
+}
 </script>
 
 <style lang="scss">
-  @import "~vditor/src/assets/scss/index.scss";
+@import "~vditor/src/assets/scss/index.scss";
 
-  .article__wrapper {
+.article__wrapper {
   max-width: 980px;
   margin: 0 auto;
   display: block;
   padding-left: 1rem;
   padding-right: 1rem;
   box-sizing: border-box;
-  }
+}
 </style>