Ship Search 船舶搜索

异步搜索船舶，支持防抖、键盘选择、请求取消和自定义结果。

命令行安装

npx @loongship-kit/ui add ship-search

基础用法

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { ShipSearch } from '@/components/loongship/ship-search'
import type { ShipSearchItem } from '@/components/loongship/ship-search'

const selected = ref<ShipSearchItem>()
const ships: ShipSearchItem[] = [
  { mmsi: '413877020', shipTypeName: '未定义' },
  { mmsi: '412412060', nameEn: 'DA YU FAN HUA', shipTypeName: '渔船' },
  { mmsi: '413440560', nameEn: 'XIN HUAN YUN 6', shipTypeName: '货船' }
]

async function searchMethod(keyword: string) {
  await new Promise(resolve => setTimeout(resolve, 300))
  const query = keyword.toLowerCase()
  return ships.filter(item =>
    [item.nameEn, item.nameCn, item.mmsi, item.callSign, item.imo, item.shipTypeName]
      .filter(Boolean)
      .join(' ')
      .toLowerCase()
      .includes(query)
  )
}
</script>

<template>
  <ShipSearch :search-method="searchMethod" @select="selected = $event" />
  <p v-if="selected">已选择：{{ selected.nameEn || selected.nameCn || selected.mmsi }}</p>
</template>

自定义结果

查看代码

<template>
  <ShipSearch :search-method="searchMethod">
    <template #item="{ item, index }">
      <strong>{{ index + 1 }}. {{ item.nameEn || item.nameCn || item.mmsi }}</strong>
      <span>{{ item.shipTypeName || '未知类型' }}</span>
    </template>
  </ShipSearch>
</template>

请求失败

输入任意关键词可查看失败状态；异常通过 error 事件交给业务处理。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { ShipSearch } from '@/components/loongship/ship-search'

const searchError = ref('')

async function failedSearch() {
  await new Promise(resolve => setTimeout(resolve, 300))
  throw new Error('网络不可用')
}
</script>

<template>
  <ShipSearch
    :search-method="failedSearch"
    :debounce-ms="0"
    @error="searchError = String($event)"
  />
  <p v-if="searchError">业务侧收到：{{ searchError }}</p>
</template>

API

结果类型

ShipSearchItem 包含 id、nameCn、nameEn、mmsi、callSign、imo、shipTypeName，字段均可选。

属性

属性	类型	默认值	说明
searchMethod	(keyword, signal?) => Promise<ShipSearchItem[]>	-	异步搜索函数，必填；可将 signal 透传给请求客户端
ariaLabel	string	'船舶搜索'	输入框可访问名称
placeholder	string	内置船舶搜索文案	输入提示
debounceMs	number	300	输入防抖毫秒数
emptyText	string	'未匹配到相应船舶'	空结果提示
errorText	string	'搜索失败，请稍后重试'	请求失败提示

事件

事件	参数	说明
search	keyword: string	搜索请求发起前触发
select	item: ShipSearchItem	用户选择一条搜索结果时触发
clear	无	输入内容被清空时触发
error	error: unknown	最新一次搜索请求失败时触发

插槽

插槽	参数	说明
item	{ item: ShipSearchItem, index: number }	自定义每条结果的内容