uni-app搜索功能和弹出层放在一起使用的实例

以下是一个uni-app搜索功能和弹出层放在一起使用的示例代码，供你参考：

<template>
  <view>
    <search
      placeholder="请输入关键字"
      @change="onSearchChange"
    ></search>
    <view v-if="showPopup">
      <popup @close="onPopupClose">
        <view v-if="popupData">
          <text>{{ popupData.title }}</text>
          <text>{{ popupData.description }}</text>
        </view>
      </popup>
    </view>
    <view v-for="(item, index) in searchResult" :key="index">
      <text>{{ item.title }}</text>
      <text>{{ item.description }}</text>
      <button @click="onPopupClick(item)">查看详情</button>
    </view>
  </view>
</template>

<script>
import { searchApi } from '@/api/search'
export default {
  data() {
    return {
      keyword: '',
      searchResult: [],
      showPopup: false,
      popupData: null
    }
  },
  methods: {
    async onSearchChange(e) {
      this.keyword = e.detail.value
      if (this.keyword) {
        const res = await searchApi(this.keyword)
        this.searchResult = res.data
      } else {
        this.searchResult = []
      }
    },
    onPopupClick(item) {
      this.popupData = item
      this.showPopup = true
    },
    onPopupClose() {
      this.popupData = null
      this.showPopup = false
      this.keyword = ''
      this.searchResult = []
    }
  }
}
</script>

在这个示例中，我们使用了uni-ui中的search组件和popup组件。

当用户在搜索框中输入关键字时，会触发onSearchChange方法，将关键字传递给后台进行搜索操作，并将搜索结果存储在searchResult数组中。

当用户点击某个搜索结果的“查看详情”按钮时，会触发onPopupClick方法，将该搜索结果的详细信息传递给弹出层组件，并打开弹出层。

当用户关闭弹出层时，会触发onPopupClose方法，清空页面中的搜索结果和搜索关键字。

通过这个示例，你可以了解如何在uni-app中实现搜索功能和弹出层的组合使用。