热搜列表 - 热搜点击处理

Author: ppambler

project/imooc-blog/components/search-hot-list/search-hot-list.vue

@@ -1,14 +1,14 @@
 <!--
  * @Date: 2021-12-21 21:51:50
- * @LastEditTime: 2021-12-22 17:36:31
+ * @LastEditTime: 2021-12-22 17:59:27
  * @FilePath: \imooc-blog\components\search-hot-list\search-hot-list.vue
 -->
 <template>
   <view class="search-hot-list-container">
     <!-- 标题 -->
     <view class="search-hot-title">慕课热搜 - 全网技术 一网打尽</view>
     <block v-for="(item, index) in hotList" :key="index">
-      <view class="search-hot-item">
+      <view class="search-hot-item" @click="onItemClick(item)">
         <!-- 序号 -->
         <hot-ranking :ranking="index + 1"></hot-ranking>
         <!-- 文本 -->
@@ -46,6 +46,12 @@ export default {
       this.hotList = res.list;
       console.log(this.hotList);
     },
+    /**
+     * item 点击事件
+     */
+    onItemClick(item) {
+      this.$emit("onSearch", item.label);
+    },
   },
 };
 </script>

project/imooc-blog/styles/global.scss

@@ -14,6 +14,16 @@
   word-break: break-all;
 }
 
+.line-clamp {
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+}
+
 // 卡片视图
 .card {
   border: 1px solid #f9f9f9;

project/imooc-blog/subpkg/pages/search-blog/search-blog.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2021-12-21 16:33:53
- * @LastEditTime: 2021-12-22 17:35:06
+ * @LastEditTime: 2021-12-22 18:00:12
  * @FilePath: \imooc-bloge:\BlogDemo\imooc-uni-app\project\imooc-blog\subpkg\pages\search-blog\search-blog.vue
 -->
 <template>
@@ -24,7 +24,7 @@
     <!-- 热搜列表 -->
     <view class="search-hot-list-box card" v-if="showType === HOT_LIST">
       <!-- 列表 -->
-      <search-hot-list />
+      <search-hot-list @onSearch="onSearchConfirm" />
     </view>
     <!-- 搜索历史 -->
     <view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">