需求:
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;}