uni-app 首页搜索栏添加功能按钮插件

在uni-app中，你可以在首页搜索栏添加功能按钮插件，通过自定义组件来实现这一功能。下面是一个简单的代码示例，展示如何在搜索栏右侧添加一个功能按钮（比如一个放大镜图标或者设置图标）。

1. 创建自定义组件

首先，在components目录下创建一个新的组件文件，比如SearchBar.vue。

<template>
  <view class="search-bar">
    <input 
      type="text" 
      placeholder="请输入搜索内容" 
      @input="onInput" 
      v-model="searchQuery"
      class="search-input"
    />
    <button 
      class="search-button" 
      @click="onSearch"
    >
      搜索
    </button>
    <button 
      class="function-button" 
      @click="onFunctionClick"
    >
      <text>功能</text>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    onInput(event) {
      this.searchQuery = event.detail.value;
    },
    onSearch() {
      this.$emit('search', this.searchQuery);
    },
    onFunctionClick() {
      this.$emit('function-click');
    }
  }
};
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.search-input {
  flex: 1;
  padding: 5px;
  border: none;
  border-radius: 4px;
}
.search-button, .function-button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.function-button {
  background-color: #e0e0e0;
  color: #333;
}
</style>

2. 在首页中使用自定义组件

然后，在你的首页文件（比如pages/index/index.vue）中引入并使用这个自定义组件。

<template>
  <view>
    <SearchBar 
      @search="handleSearch" 
      @function-click="handleFunctionClick"
    />
    <!-- 其他内容 -->
  </view>
</template>

<script>
import SearchBar from '@/components/SearchBar.vue';

export default {
  components: {
    SearchBar
  },
  methods: {
    handleSearch(query) {
      console.log('Search:', query);
      // 执行搜索逻辑
    },
    handleFunctionClick() {
      console.log('Function button clicked');
      // 执行功能按钮逻辑
    }
  }
};
</script>

这个示例展示了如何在uni-app中实现一个带有功能按钮的搜索栏。你可以根据需要进一步自定义组件的样式和功能。