蒋氏排序组件提交

src/components/JzSort/index.vue

@@ -0,0 +1,98 @@
+<!-- jz排序组件 -->
+<template>
+  <div class="jzSortCom">
+    <div class="jsItem" v-for="{ label, key } in sortData" :key="key" @click.stop="handleSortChange(key)">
+      <!-- 排序字段名称 -->
+      <span>{{ label }}</span>
+      <!-- 排序图标 -->
+      <div class="isIconList">
+        <img :src="getSortIcon(key, 'asc')" class="up" />
+        <img :src="getSortIcon(key, 'desc')" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import sortIcon from '@/assets/images/sortIcon.png'; // 排序图标
+import sortIconAct from '@/assets/images/sortIconAct.png'; // 排序图标-选中
+
+defineProps({
+  // 排序初始化数据 Array<{ label: string; key: string }>
+  sortData: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const sortRes = defineModel({}); // 组件值 {key: string; order: 'asc' | 'desc' | ''}
+
+// 获取排序图标
+const getSortIcon = (key, order) => {
+  return sortRes.value.key === key && sortRes.value.order === order ? sortIconAct : sortIcon;
+};
+
+// 排序change事件
+const handleSortChange = (keyName) => {
+  // 排序映射
+  const sortMap = new Map([
+    [1, 'desc'],
+    [2, 'asc'],
+    [3, ''],
+    ['desc', 1],
+    ['asc', 2],
+    ['', 3],
+    [undefined, 3]
+  ]);
+  const { key, order } = sortRes.value;
+  let kn = keyName; // 当前点击的key
+  let st = 1; // 同上映射：1 降序 2 升序 3 无排序
+  if (keyName === key) {
+    const orderNum = sortMap.get(order); // 当前排序状态
+    st = orderNum === 3 ? 1 : orderNum + 1; // 下一个排序状态
+  }
+  sortRes.value = { key: kn, order: sortMap.get(st) }; // 更新排序状态
+};
+</script>
+
+<style scoped lang="scss">
+.jzSortCom {
+  display: flex;
+  align-items: center;
+
+  .jsItem {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    color: #a8abb2;
+    letter-spacing: 1px;
+    font-weight: 600;
+    cursor: pointer;
+
+    .isIconList {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin-left: 6px;
+      img {
+        width: 10px;
+        height: auto;
+        background-color: transparent;
+
+        &.up {
+          transform: rotate(180deg);
+        }
+      }
+
+      img + img {
+        margin-top: 2px;
+      }
+    }
+  }
+
+  .jsItem + .jsItem {
+    margin-left: 60px;
+  }
+}
+</style>

src/views/TextBook/index.vue

@@ -27,7 +27,6 @@
           </el-checkbox-group>
         </el-form-item>
 
-
         <el-form-item label="学科">
           <el-checkbox-group>
             <el-checkbox-button>语文</el-checkbox-button>
@@ -57,7 +56,6 @@
           </el-checkbox-group>
         </el-form-item>
 
-
         <el-form-item label="类型">
           <el-checkbox-group>
             <el-checkbox-button>全部</el-checkbox-button>
@@ -83,7 +81,7 @@
       </el-form>
     </el-card>
 
-    <el-row :gutter="10" style="margin-top: 10px;">
+    <el-row :gutter="10" style="margin-top: 10px">
       <el-col :span="6">
         <el-card>
           <template #header>
@@ -101,26 +99,21 @@
       <el-col :span="18">
         <el-card>
           <div class="card-right-header">
-            <el-table :data="tableSortData" :default-sort="{ prop: 'date', order: 'descending' }">
-              <el-table-column prop="date" label="上传时间" sortable width="180" />
-              <el-table-column prop="name" label="浏览量" sortable width="180" />
-              <el-table-column prop="address" label="下载量" sortable width="180" />
-            </el-table>
+            <!-- 排序组件 -->
+            <JzSort v-model="sortResult" :sortData="sortData" />
           </div>
 
           <div class="book-grid">
-            <el-card v-for="item in 6">
+            <el-card v-for="item in 6" :key="item">
               <div class="book-content">
-                <img class="file-type" src="@/assets/images/word.png" alt="">
-                <img src="@/assets/images/book.png" alt="">
+                <img class="file-type" src="@/assets/images/word.png" alt="" />
+                <img src="@/assets/images/book.png" alt="" />
               </div>
 
               <template #footer>
                 <div class="book-title">汉字文化云课堂</div>
                 <div class="book-des">
-                  <div class="book-teacher">
-                    <span>王老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span>
-                  </div>
+                  <div class="book-teacher"><span>蒋老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span></div>
                   <div class="book-view">
                     <span>
                       <el-icon>
@@ -140,17 +133,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { View } from '@element-plus/icons-vue'
+import { ref, watchEffect } from 'vue';
+import { View } from '@element-plus/icons-vue';
+
+import JzSort from '@/components/JzSort/index.vue';
 
 const tableData = [
   {
     id: 1,
-    name: '全部',
+    name: '全部'
   },
   {
     id: 2,
-    name: '我上学了',
+    name: '我上学了'
   },
   {
     id: 3,
@@ -158,42 +153,33 @@ const tableData = [
     children: [
       {
         id: 31,
-        name: '1 天地人',
+        name: '1 天地人'
       },
       {
         id: 32,
-        name: '2金木水火土',
-      },
-    ],
+        name: '2金木水火土'
+      }
+    ]
   },
   {
     id: 4,
-    name: '汉语拼音',
-  },
-]
+    name: '汉语拼音'
+  }
+];
 
-const tableSortData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
+// 排序初始化数据
+const sortData = [
+  { label: '上传时间', key: 'date' },
+  { label: '浏览量', key: 'num1' },
+  { label: '下载量', key: 'num2' }
+];
+const sortResult = ref({}); // 排序结果
+
+// 监听排序结果
+watchEffect(() => {
+  console.log('===排序 改变了===', sortResult.value);
+  // TODO: 排序逻辑
+});
 </script>
 
 <style lang="scss" scoped>
@@ -222,9 +208,9 @@ const tableSortData = [
   }
 
   .card-right-header {
-    :deep(.el-table__body-wrapper) {
-      display: none;
-    }
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+    margin-bottom: 16px;
   }
 
   .book-grid {
@@ -253,10 +239,9 @@ const tableSortData = [
     .book-des {
       display: flex;
       justify-content: space-between;
-      color:#919DA3;
+      color: #919da3;
       padding: 5px 0;
     }
-
   }
 }
 </style>