求解一个警告?

作者站长头像
站长
· 阅读数 5

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);
    },
  },
});
回复
1个回答
avatar
test
2024-06-25
<template>
  <Select
    :showSearch="true"
    :onSearch="handleSearch"
    ...
  >
    <!-- 选项... -->
  </Select>
</template>

<script>
export default {
  // ...
  methods: {
    handleSearch(value) {
      // 处理搜索逻辑
    },
    // ...
  }
  // ...
};
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容