需求:
1:搜索输入时显示清空按钮和搜索按钮;
2:点击搜索按钮失去焦点,并查询;
3:点击清空按钮后重新聚焦;
需要解决的问题:
1:失去焦点需要别的处理的话要加延时器,跟内部机制执行顺序有关;
2:像清空时再次聚焦就需要mousedown事件处理,否则无法聚焦
代码示例
html
<view class="search-main"><input ref="searchInput" class="search-input" v-model="state.searchVal" placeholder="请输入关键字"@focus="isFocus" @blur="isBlur" @confirm="goSearch" clearable /><view class="right-box"><image class="del-img" src="https://lfrz1.stor.enncloud.cn/enn-oss/account2688/clear82798.png"@mousedown="blutStop" @click.stop="clearInput" v-show="state.searchVal.length>0 && state.isFocu"></image><view :class="['add-search',state.searchVal.length==0 && state.isFocu?'add-opacity':'']"@click="goSearch" v-show="state.searchVal.length>0||state.isFocu">搜索</view></view><image class="search-ico" src="https://lfrz1.stor.enncloud.cn/enn-oss/account2688/sousuo52335.png"></image></view>
js
// 搜索框失去焦点const isBlur = (event) => {setTimeout(() => {state.isFocu = false;}, 300)}const blutStop = (e) => {e.preventDefault();}//去搜索const goSearch = () => {if (state.searchVal.length == 0) returnCommon.navigateTo({url: `/subPagesB/pages/helpCenter/search?value=${state.searchVal}`,});}//搜索框清空const clearInput = () => {state.searchVal = '';state.isClear = true;}