添加内容

This commit is contained in:
ember 2025-02-14 23:16:17 +08:00
parent 470b4c75ea
commit 1ab7d0a308
3 changed files with 591 additions and 5 deletions

View File

@ -104,6 +104,8 @@ links:
- 🔄 基于**Protocol Buffers + node-gyp**设计分布式微服务协议编写中间件的统一RPC接口并基于**Protobuf**的**oneof**特性实现了中间件对CGI-BIN的**多态**调用。
- 📂 为团队封装了**SearchPanel**等基于Vue的响应式高可扩展性组件实现了多页面的组件复用与样式统一并编写了详细的**文档**,方便团队其他成员使用。
### 🌍 **NEU 小站 | 校园综合服务网站** [🌐东北大学.com](https://东北大学.com)
- **独立开发** 🎯,提供课程评分📊、资源共享📂、攻略分享📖等功能。
- 基于 **HugoGo 语言)** 的模板引擎开发前端整体框架,实现 **高效静态页面渲染**

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
---
title: 下拉联想结果的全局监听click事件技术实现
description: 写Vue组件时实现下拉联想结果点击外部自动关闭同时用了全局click事件监听来代替常用的onBlurSuggest逻辑
title: 【SearchPanel组件】下拉联想结果的全局监听click事件技术实现
description: 写SearchPanel组件时实现下拉联想结果点击外部自动关闭同时用了全局click事件监听来代替常用的onBlurSuggest逻辑
date: 2025-02-14T01:31:00+08:00
slug: 下拉联想
categories:
@ -8,9 +8,14 @@ categories:
- 奇技淫巧
tags: [
"Vue",
"前端"
"前端",
"JavaScript"
]
lastmod: 2025-02-14T02:58:00+08:00
links:
- title: 【SearchPanel组件】详细配置文档
description: SearchPanel是一个基于Vue的搜索组件包含各类搜索项和搜索结果表格支持响应式数据更新
website: /post/实习小记/searchpanel组件文档/
---
给公司写Vue组件时需要实现一个下拉联想结果这个下拉联想结果是根据用户输入内容实时调用API获取的当用户输入内容时下拉联想结果会自动弹出。自然地如果用户点击了其他地方下拉联想结果应该自动关闭以保证用户体验。
@ -121,7 +126,7 @@ beforeDestroy() {
另外,页面中有多个联想输入框时,使用全局`click`事件就能统一管理所有输入框的失焦逻辑,避免为每个输入框单独绑定`blur`事件可能带来的冗余代码,或者一些其他的不一致状态。
又熬到3点了看来这辈子不可能早睡了。。。附组件的HTML和JS部分完整代码
又熬到3点了看来这辈子不可能早睡了。。。附组件的HTML和JS部分完整代码(此组件已修改,下面为修改前的代码,非最终版本)
```html
<template>
<div class="search-panel">
@ -334,7 +339,7 @@ beforeDestroy() {
// 是否在字段变化时自动请求
autoFetch: {
type: Boolean,
default: true
default: false
},
// 每页数量
pageSize: {