feat: 交互循环

Author: ceilf6

vue2/sandboxs/src/components/TreeListMenu/index.vue

@@ -11,6 +11,14 @@ Vue 的 template 是静态的，不像 React ，如果想要实现嵌套结构
       <span :class="{ selected: item.isSelected }" @click="handleClick(item)">{{
         item.name
       }}</span>
+      <span
+        v-if="item.aside"
+        @click="handleClick(item)"
+        class="aside"
+        :class="{ selected: item.isSelected }"
+      >
+        {{ item.aside }}
+      </span>
       <TreeListMenu :list="item.children" @click="handleClick">
         <!-- 归的时候从子组件上抛的事件继续往上抛 -->
       </TreeListMenu>

vue2/sandboxs/src/views/Blog/components/BlogCategory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="blog-category-container" v-loading="isLoading">
     <h2>文章分类</h2>
-    <TreeListMenu :list="list" @select="handleSelect" />
+    <TreeListMenu :list="list" @click="handleClick" />
   </div>
 </template>
 
@@ -11,6 +11,7 @@ import fetchData from "@/mixins/fetchData.js";
 import { getBlogCategories } from "@/api/blog.js";
 export default {
   mixins: [fetchData([])],
+  // 只需要 mixins 中 created 的初始化一次即可，因为分类的数据不像 分页数据 一样会被路由数据影响
   components: {
     TreeListMenu,
   },
@@ -24,15 +25,15 @@ export default {
     list() {
       const totalArticleCount = this.data.reduce(
         (a, b) => a + b.articleCount,
-        0,
+        0, // reduce((pre, now) => 操作, preDefault)
       );
       const result = [
         { name: "全部", id: -1, articleCount: totalArticleCount },
         ...this.data,
       ];
       return result.map((it) => ({
         ...it,
-        isSelect: it.id === this.categoryId,
+        isSelected: it.id === this.categoryId, // 通过路由信息 => 选中
         aside: `${it.articleCount}篇`,
       }));
     },
@@ -41,7 +42,8 @@ export default {
     async fetchData() {
       return await getBlogCategories();
     },
-    handleSelect(item) {
+    handleClick(item) {
+      // 注意方法名需要和递归组件中一致，否则上抛无法处理
       const query = {
         page: 1,
         limit: this.limit,
@@ -68,12 +70,12 @@ export default {
 
 <style scoped lang="less">
 .blog-category-container {
-  width: 300px;
+  width: 250px;
   box-sizing: border-box;
   padding: 20px;
   position: relative;
   height: 100%;
-  overflow-y: auto;
+  overflow-y: auto; // 别忘记滚动条
   h2 {
     font-weight: bold;
     letter-spacing: 2px;

vue2/sandboxs/src/views/Blog/components/BlogList.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="blog-list-container" ref="container" v-loading="isLoading">
+    <!-- isLoading 是从混入 fetchData 中拿到的 -->
+    <!-- Vue3 的 composition 组合式更便利 -->
     <ul>
       <li v-for="item in data.rows" :key="item.id">
         <div class="thumb" v-if="item.thumb">
@@ -24,7 +26,8 @@
         </div>
       </li>
     </ul>
-    <!-- 分页放到这里 -->
+    <!-- 路由信息 => 分页参数 -->
+    <!-- fetchData => 总数据量 -->
     <Pager
       v-if="data.total"
       :current="routeInfo.page"
@@ -63,7 +66,7 @@ export default {
     formatDate, // 导入后记得配置到组件中，否则模版中不能用
     async fetchData() {
       console.log("=== BlogList fetchData 方法被调用", this.routeInfo);
-      // return
+      // 将路由信息传入 fetch 参数
       const res = await getBlogs(
         this.routeInfo.page,
         this.routeInfo.limit,
@@ -72,6 +75,7 @@ export default {
       console.log("=== BlogList res", res);
       return res;
     },
+    // 页码变化 => 改变路由
     handlePageChange(newPage) {
       const query = {
         page: newPage,
@@ -86,6 +90,7 @@ export default {
           query,
         });
       } else {
+        // 有分类的话得传入参数
         // /article/cate/${this.routeInfo.categoryId}?page=${newPage}&limit=${this.routeInfo.limit}
         this.$router.push({
           name: "CategoryBlog",
@@ -98,12 +103,15 @@ export default {
     },
   },
   watch: {
-    async $route() {
-      this.isLoading = true;
-      // 滚动高度为0
-      this.$refs.container.scrollTop = 0;
-      this.data = await this.fetchData();
-      this.isLoading = false;
+    // 观察路由this.$route ⇒ fetch new Data
+    $route: {
+      async handler() {
+        this.isLoading = true;
+        // 设置滚动高度为0 ，往上切
+        this.$refs.container.scrollTop = 0;
+        this.data = await this.fetchData(); // 不需要参数，fetchData 内部就用的 计算属性
+        this.isLoading = false;
+      },
     },
   },
 };
@@ -119,7 +127,7 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  scroll-behavior: smooth;
+  scroll-behavior: smooth; // 平滑滚动
   ul {
     list-style: none;
     margin: 0;

vue2/sandboxs/src/views/Blog/index.vue

@@ -1,13 +1,15 @@
+<!-- 交互循环：路由信息 ⇒ 激活状态、文章列表 ⇒ 用户点击操作 ⇒ 更改路由信息  -->
+
 <template>
   <div class="blog-container">
-    <h1>
+    <!-- <h1>
       <a href="https://blog.csdn.net/2301_78856868"
         >Welcome to ceilf6's Blogs</a
       >
       <span v-if="$route.params.categoryId">
         分类ID: {{ $route.params.categoryId }}
       </span>
-    </h1>
+    </h1> -->
     <ThreeColumnLayout>
       <!-- 注意 ThreeColumnLayout 中的 main 是类名、不是插槽 name -->
       <BlogList></BlogList>