用uniapp写一个含有左边搜索图标中间文字内容输入右边搜索按钮的搜索框

在uni-app中，你可以使用`uni-icons`组件来添加左边搜索图标，使用`uni-input`组件来添加中间文字内容输入框，以及使用`uni-button`组件来添加右边搜索按钮。下面是一个示例代码：

<template>
  <view class="search-bar">
    <view class="search-icon">
      <uni-icons type="search" size="18"></uni-icons>
    </view>
    <view class="search-input">
      <uni-input v-model="keyword" placeholder="请输入搜索内容"></uni-input>
    </view>
    <view class="search-button">
      <uni-button type="primary" @click="search">搜索</uni-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    search() {
      // 在这里编写搜索逻辑
      console.log('搜索关键词:', this.keyword);
    },
  },
};
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 4px;
  background-color: #f5f5f5;
}

.search-icon {
  margin-right: 8px;
}

.search-input {
  flex: 1;
}

.search-button {
  margin-left: 8px;
}
</style>

在这个示例中，我们使用`uni-icons`组件来添加搜索图标，使用`uni-input`组件来创建输入框，并使用`uni-button`组件来添加搜索按钮。当点击搜索按钮时，会调用`search`方法，并将输入框中的关键词打印到控制台。

你可以根据需要修改样式和搜索逻辑来适应你的应用场景。