uni-app uni-search-bar 搜索icon和关闭icon不居中问题

针对uni-app中uni-search-bar组件的搜索图标和关闭图标不居中的问题，这通常是由于样式冲突或组件内部样式未正确应用所导致的。以下是一些可能的解决方案，主要通过CSS样式调整来实现图标的居中显示。

解决方案一：直接修改uni-search-bar的样式

首先，你可以尝试直接修改uni-search-bar内部图标的样式，使其居中。这里提供一个示例代码，通过覆盖默认样式来实现：

/* 覆盖uni-search-bar内部图标的样式 */
.uni-search-bar .uni-search-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 确保搜索输入框内的内容也居中（如果需要） */
.uni-search-bar .uni-search-bar__input {
    text-align: center; /* 仅当需要输入框文本居中时使用 */
}

/* 如果关闭图标单独处理 */
.uni-search-bar .uni-search-bar__clear {
    position: absolute; /* 根据实际情况调整定位 */
    right: 10px; /* 根据实际情况调整位置 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
}

解决方案二：使用自定义图标

如果上述方法未能解决问题，你可以考虑使用自定义图标，并完全控制其样式和位置。以下是如何使用自定义图标的示例：

<template>
  <view class="custom-search-bar">
    <image class="search-icon" src="/static/search.png" @click="showInput"></image>
    <input v-if="isInputVisible" class="search-input" v-model="searchQuery" placeholder="Search..." />
    <image v-if="isInputVisible && searchQuery" class="clear-icon" src="/static/clear.png" @click="clearSearch"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isInputVisible: false,
      searchQuery: ''
    };
  },
  methods: {
    showInput() {
      this.isInputVisible = true;
      this.$nextTick(() => {
        this.$refs.searchInput.focus();
      });
    },
    clearSearch() {
      this.searchQuery = '';
      this.isInputVisible = false; // 根据需求决定是否隐藏输入框
    }
  }
};
</script>

<style>
.custom-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon, .clear-icon {
  width: 24px;
  height: 24px;
}
.search-input {
  flex: 1;
  margin-left: 10px;
  margin-right: 10px;
}
</style>

上述代码展示了如何自定义一个搜索栏，包括搜索图标、输入框和清除图标的布局。通过CSS样式，你可以完全控制这些元素的位置和样式。