uniapp开发bug记录

项目场景：

uniapp开发过程中遇到的一些问题

---

一.uview plus

1.组件Textarea 文本域

问题描述

自动高度的使用，相关字段autoHeight，发现仅仅是设置autoHeight会有问题

官方示例代码
<up-textarea v-model="value3" placeholder="请输入内容" autoHeight ></up-textarea>

效果图：

原因分析：

由于up-textarea的默认高度是70，官方的示例代码只是加了autoHeight 的配置字段，但是并没有注意到默认高度，一旦文字过多，超过高度，文字就超出输入框了

---

解决方案：

提示：既然是由于没有设置高度导致，如果设置一个固定高度也不是很自由，那就设置一个height=“auto”，就完美解决了

// 解决方案代码
<up-textarea v-model="value3" placeholder="请输入内容" autoHeight height="auto" ></up-textarea>

效果图：

二. 搜索框的input焦点问题（pc端vue项目）

问题描述

最近在弄一个搜索输入框，当获取焦点的时候，需要下面展示一个历史搜索记录，当一切都很顺利的时候，开发到点击下面展示搜索内容的清空历史记录按钮的时候，由于默认行为，会使得input输入框失去焦点，并触发失去焦点事件相关的函数，达不到想要的效果

部分关键相关代码
//搜索输入框
<input class="search_input" v-model="data.keywords" @focus="handleFocusKeywords" @blur="handleBlurKeywords" @keyup.enter="search"/>
// 清除历史记录区域
<div class="clear" @click="clearSearchHistory">
   <el-icon><Delete /></el-icon>
   <span>Clear history</span>
</div>

输入框获取焦点效果图1：

• 点击Clear history前（input有焦点，下面的盒子展示出来）

  

错误效果图2：

• 点击Clear history后（input失去焦点，触发了blur事件函数，相关逻辑会使得下面的盒子隐藏）

正确效果图3：

• 点击Clear history后（input没有失去焦点，不会触发了blur事件函数，相关逻辑也不会运行，下面的盒子存在）

原因分析：

点击Clear history后，由于默认行为，导致触发了input框失去焦点的行为，同时触发失去焦点事件，运行相关逻辑，出现了图2
的错误效果

解决方案：

点击Clear history后，阻止默认行为就行，那么加在哪个地方呢，第一想法是用@click.prevent的指令，但是并没有生效，依旧会触发，研究了一会儿解决代码如下：

部分关键相关代码
//搜索输入框
<input class="search_input" v-model="data.keywords" @focus="handleFocusKeywords" @blur="handleBlurKeywords" @keyup.enter="search"/>
// 清除历史记录区域
<div class="clear" @click="clearSearchHistory" @mousedown="preventBlur">
   <el-icon><Delete /></el-icon>
   <span>Clear history</span>
</div>
// 加入一个mousedown的行为事件来单独阻止默认行为，这样点击clear区域，不会触发input的失去焦点行为
const preventBlur = (e) => {
  e.preventDefault();
};