求解一个警告？

Question

Warning: onSearch should work with showSearch instead of use alone.（**.ts:50）

这个警告是什么意思？如何解决呢？

import { defineStore } from "pinia";

interface AddDisplayItem {
  component: string; // 组件名称
  data?: any; // 传入组件的数据
  transition?:
  | "fade-in-linear"
  | "fade-in"
  | "zoom-in-center"
  | "zoom-in-top"
  | "zoom-in-bottom"; // 组件的显隐动画
}
interface DisplayItem extends AddDisplayItem {
  zIndex: number; // 组件的zIndex 样式
  show: boolean; // 组件的show 样式
}
interface SetDisplayItem {
  zIndex: number;
  show?: boolean;
  data?: any;
}

// 作为弹窗层级 及 唯一标识
const ZINDEX = 50;
let zIndex: number = ZINDEX;

export const useCounterStore = defineStore("popups", {
  state: () => {
    return {
      displayItem: [] as Array<DisplayItem>,
    };
  },
  actions: {
    /** 添加弹窗 dataTs 应当是全新对象 */
    addPopup(dataTs: AddDisplayItem): number {
      // 类型转换
      let data = dataTs as DisplayItem;

      // 累加弹窗层级 若要自定义zIndex，需自行在组件内部设置样式进行覆盖
      data.zIndex = ++zIndex;
      Object.defineProperty(data, "zIndex", {
        writable: false,
        configurable: false,
      });

      // 动画名称
      data.transition = data.transition || "fade-in-linear";

      // 添加展示项
      this.displayItem.push(data);

      //  触发 transition 动画
      requestAnimationFrame(() => {
        this.setPopupConfig({ zIndex: data.zIndex, show: true });
      });

      //  由于zIndex的唯一性,返回其作为后续操作的标识符
      return zIndex;
    },
    /** 删除弹窗 */
    deletePopup(zIndex: number) {
      this.displayItem = this.displayItem.filter((e) => e.zIndex != zIndex);

      //   关闭所有弹窗时复位层级
      if (this.displayItem.length == 0) zIndex = ZINDEX;
    },
    /** 设置属性 data 应当是全新对象  */
    setPopupConfig(data: SetDisplayItem) {
      let item = this.displayItem.find((e) => e.zIndex === data.zIndex);
      delete data.zIndex;
      if (item) Object.assign(item, data);
    },
  },
});

Answer 1

<template>
  <Select
    :showSearch="true"
    :onSearch="handleSearch"
    ...
  >
    <!-- 选项... -->
  </Select>
</template>

<script>
export default {
  // ...
  methods: {
    handleSearch(value) {
      // 处理搜索逻辑
    },
    // ...
  }
  // ...
};
</script>