uniapp搜索框vue

UniApp 是一个基于 Vue.js 的跨平台框架，用于快速构建多端应用，包括 Web、iOS、Android 和 H5。对于在 UniApp 中创建一个搜索框（Search Box），你可以使用 Vue 的组件化思想来构建。以下是一个简单的步骤和示例：

1. **创建 SearchBox 组件**:
在 Vue 项目中，你可以创建一个名为 `search-box.vue` 的文件，定义一个 Vue 组件。例如：

<template>
  <view class="search-box">
    <input v-model="searchText" placeholder="请输入搜索内容" @input="handleInput" />
    <button @click="submitSearch">搜索</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
    };
  },
  methods: {
    handleInput(e) {
      this.searchText = e.detail.value;
    },
    submitSearch() {
      // 这里可以根据搜索文本执行相应的搜索操作
      console.log('搜索关键词:', this.searchText);
    },
  },
};
</script>

<style scoped>
.search-box {
  /* 样式自定义 */
}
</style>

2. **在父组件中使用**:
在父组件（如 App.vue 或者其他需要搜索框的页面）中导入并使用这个组件：

<template>
  <uni-page-router>
    <navigator :url="$route.path" component="searchPage">
      <search-box ref="searchBox" />
    </navigator>
  </uni-page-router>
</template>

<script>
import SearchBox from '@/components/search-box.vue';

export default {
  components: {
    SearchBox,
  },
  setup() {
    const searchBoxRef = ref(null); // 获取 SearchBox 组件的引用
    return {
      searchBoxRef,
    };
  },
  onReady() {
    // 当页面加载完成时，可以监听搜索框的输入事件
    searchBoxRef.value.handleInput = (e) => {
      console.log('搜索框输入:', e.detail.value);
    };
  },
};
</script>