Detail Container 详情容器

船舶详情容器，展示双语船名、国旗、头部操作和业务内容。

命令行安装

npx @loongship-kit/ui add detail-container ship-detail

基础用法

LIBERIA（利比里亚）

MMSI

636024395

呼号

V7A6391

航速

10.0kn

状态

在航

最近事件：暂无

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/loongship/button'
import { DetailContainer } from '@/components/loongship/detail-container'
import { ShipDetail } from '@/components/loongship/ship-detail'
import type { ShipFieldConfigItem } from '@/components/loongship/ship-detail'

const open = ref(true)
const lastEvent = ref('暂无')
const data = {
  mmsi: '636024395',
  callSign: 'V7A6391',
  speed: '10.0kn',
  status: '在航'
}
const fields: ShipFieldConfigItem[] = [
  { key: 'mmsi', label: 'MMSI', collapsedVisible: true },
  { key: 'callSign', label: '呼号' },
  { key: 'speed', label: '航速', collapsedVisible: true },
  { key: 'status', label: '状态' }
]
</script>

<template>
  <Button v-if="!open" size="sm" @click="open = true">重新打开</Button>
<DetailContainer
  v-model:open="open"
  name-cn="利比里亚"
  name-en="LIBERIA"
  flag-src="https://flagcdn.com/w40/lr.png"
  max-width="520px"
  @close="lastEvent = 'close'"
>
    <template #actions><Button size="sm" variant="ghost">未关注</Button></template>
    <ShipDetail :data="data" :fields="fields" title="" />
</DetailContainer>
  <p>最近事件：{{ lastEvent }}</p>
</template>

API

属性

属性	类型	默认值	说明
nameCn	string	-	中文船名
nameEn	string	-	英文船名；中英文同时存在时显示 英文（中文）
flagSrc	string	-	国旗图片；加载失败后隐藏
minWidth	string | number	'320px'	最小宽度
maxWidth	string | number	'100%'	最大宽度
v-model:open	boolean	true	显示状态

事件

事件	参数	说明
update:open	value: boolean	显示状态变化，支持双向绑定
close	无	用户点击关闭按钮后触发

插槽

插槽	参数	说明
actions	无	标题栏右侧操作区域
default	无	详情主体内容