useSelectHistory

• Category: Composables
• Relate: onSelectionChange
• Dependencies: @lark-base-open/js-sdk
• Last Changed: 20 hours ago

提示

该函数需要在一个多维表格中使用，请将本文档作为一个插件在多维表格上使用以查看演示。

演示

Source

显示演示代码

demo.vue

<script setup lang="ts">
import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory({
  max: 10
})
</script>

<template>
  <p>History length: {{ history.length }}</p>
  <div style="overflow: auto;max-height: 200px;">
    <ul>
      <li
        v-for="(item, index) in history.slice().reverse()"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

用法

useSelectHistory 用于记录用户选择的历史，默认记录上限是无限（Infinity）。

import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory()

设置记录上限

可以通过 options.max 来设置记录上限，当记录数超过上限时，会自动删除最早的记录。

TIP

建议设置一个合理的上限，避免占用过多内存。

import { useSelectHistory } from "@qww0302/use-bitable"

const history = useSelectHistory({
  /**
   * 默认值为 Infinity
   */
  max: 10,
})

类型声明

import { Selection } from "@lark-base-open/js-sdk"
export type TimeStamp = number
export interface SelectHistory {
  select: Selection
  time: TimeStamp
}
export interface useSelectHistoryOptions {
  /**
   * Max history length
   *
   * 最大历史记录长度
   *
   * @default Infinity
   */
  max?: number
}
/**
 * Reactive bitable selection history
 *
 * 响应式的 `bitable` 选中项历史记录
 *
 * @param options
 * @returns
 */
export declare function useSelectHistory(
  options?: useSelectHistoryOptions,
): import("vue").Ref<
  {
    select: {
      baseId: string | null
      tableId: string | null
      viewId: string | null
      fieldId: string | null
      recordId: string | null
    }
    time: TimeStamp
  }[],
  | SelectHistory[]
  | {
      select: {
        baseId: string | null
        tableId: string | null
        viewId: string | null
        fieldId: string | null
        recordId: string | null
      }
      time: TimeStamp
    }[]
>