代码

<view class="searchBox"><view class="searchLeft"><wh-icon name="search" size="40"></wh-icon><input type="text" placeholder="请输入搜索内容" v-model="search" /></view><view class="searchBtn" @click="searchSchool">搜索</view>
</view>

javascript">import {ref,watch,
} from "vue";
const search = ref('') //搜索内容
watch(search, (newValue) => {if (!newValue) {getSchoolLists()}
})
function searchSchool() {getSchoolLists()
}

.searchBox {display: flex;align-items: center;justify-content: space-between;height: 80rpx;background: #f8f8f8;border-radius: 50rpx;padding: 0 20rpx;margin: 0 30rpx;.searchLeft {display: flex;align-items: center;width: 100%;input {text-align: left;font-size: 26rpx;border-radius: 0;margin-left: 10rpx;width: 70%;}}.searchBtn {font-size: 28rpx;color: #757575;flex-shrink: 0;}
}