Descriptions 描述列表

LhDescriptions 用於展示物件的屬性列表，支援欄數、跨欄與邊框模式。

基礎用法

藏品檔案

名稱: 青花纏枝蓮紋瓶
年代: 明永樂

類別: 瓷器
級別: 一級文物

vue

<script setup lang="ts">
import { LhDescriptions } from '@lh-ui/vue3'
</script>

<template>
  <LhDescriptions
    title="藏品档案"
    :column="2"
    :items="[
      { label: '名称', value: '青花缠枝莲纹瓶' },
      { label: '年代', value: '明永乐' },
      { label: '类别', value: '瓷器' },
      { label: '级别', value: '一级文物' },
    ]"
  />
</template>

vue

<script>
import { LhDescriptions } from '@lh-ui/vue3'

export default {
  components: { LhDescriptions },
}
</script>

<template>
  <LhDescriptions
    title="藏品档案"
    :column="2"
    :items="[
      { label: '名称', value: '青花缠枝莲纹瓶' },
      { label: '年代', value: '明永乐' },
      { label: '类别', value: '瓷器' },
      { label: '级别', value: '一级文物' },
    ]"
  />
</template>

欄數與跨欄

名稱: 千里江山圖
年代: 北宋

作者: 王希孟
材質: 絹本設色
藏地: 北京故宮博物院

vue

<script setup lang="ts">
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: '名称', value: '千里江山图', span: 2 },
      { label: '年代', value: '北宋' },
      { label: '作者', value: '王希孟' },
      { label: '材质', value: '绢本设色' },
      { label: '藏地', value: '北京故宫博物院' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="3"
    :items="[
      { label: '名称', value: '千里江山图', span: 2 },
      { label: '年代', value: '北宋' },
      { label: '作者', value: '王希孟' },
      { label: '材质', value: '绢本设色' },
      { label: '藏地', value: '北京故宫博物院' },
    ]"
  />
</template>

span 超出本列剩餘寬度時自動鉗制；最後一列不足會自動補位。

邊框模式

名稱: 蘭亭序
作者: 王羲之

年代: 東晉
書體: 行書

vue

<script setup lang="ts">
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: '名称', value: '兰亭序' },
      { label: '作者', value: '王羲之' },
      { label: '年代', value: '东晋' },
      { label: '书体', value: '行书' },
    ]"
  />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhDescriptions
    :column="2"
    border
    :items="[
      { label: '名称', value: '兰亭序' },
      { label: '作者', value: '王羲之' },
      { label: '年代', value: '东晋' },
      { label: '书体', value: '行书' },
    ]"
  />
</template>

自訂內容

條目內容可透過 item-<index> 作用域插槽覆寫。

狀態: 進行中

進度

vue

<script setup lang="ts">
</script>

<template>
  <!-- 用 #item-1 插槽覆寫「進度」條目 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: '状态', value: '进行中' },
      { label: '进度', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 用 #item-1 插槽覆寫「進度」條目 -->
  <LhDescriptions
    :column="1"
    :items="[
      { label: '状态', value: '进行中' },
      { label: '进度', value: '' },
    ]"
  >
    <template #item-1="{ item }">
      <LhProgress :percentage="66" />
    </template>
  </LhDescriptions>
</template>

國際化

條目標籤和內容可以透過 LhConfigProvider 配合語言包實現國際化切換。

藏品檔案

名稱: 青花纏枝蓮紋瓶
年代: 明永樂

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhDescriptions, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- 透過 ConfigProvider 切換語言包 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: '青花缠枝莲纹瓶' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: '明永乐' },
      ]"
    />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhDescriptions, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhDescriptions, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 透過 ConfigProvider 切換語言包 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhDescriptions
      :title="locale === 'zh-CN' ? '藏品档案' : 'Collection Archive'"
      :column="2"
      :items="[
        { label: locale === 'zh-CN' ? '名称' : 'Name', value: '青花缠枝莲纹瓶' },
        { label: locale === 'zh-CN' ? '年代' : 'Period', value: '明永乐' },
      ]"
    />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

Props

屬性	說明	類型	預設值
title	列表標題	`string`	—
column	每列展示的條目欄數	`number`	`3`
border	是否展示邊框	`boolean`	`false`
items	條目列表	`[LhDescriptionsItem](#type-LhDescriptionsItem)`[]	`() => []`
sx	快速版面配置屬性（如 `{ mt: 2, w: '50%' }`），轉內聯樣式作用於根元素	`LhSxProps`	—

LhDescriptionsItem

屬性	說明	類型	預設值
label	條目標籤	`string`	—
value	條目內容	`string \| number`	—
span	佔據的欄數，超出會鉗制	`number`	`1`

Slots

插槽名	說明	作用域
title	自訂標題	—
item-<index>	覆寫第 index 個條目的內容	`{ item }`

無障礙

條目使用 <dl> / <dt> / <dd> 語意結構，標籤與值的對應關係由元素本身表達
列末補位元素是純裝飾，標記為 aria-hidden

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/descriptions/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhDescriptionsProps

export interface LhDescriptionsProps {
  /** 描述列表標題 */
  title?: string
  /** 每列展示的條目欄數 */
  column?: number
  /** 是否展示邊框 */
  border?: boolean
  /** 條目列表；label/value/span 三元組 */
  items: LhDescriptionsItem[]
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhDescriptionsItem _{（來自 @lh-ui/share/core/descriptions）}

export interface LhDescriptionsItem {
  /** 條目標籤 */
  label: string
  /** 條目內容（也可用作用域插槽傳入） */
  value?: string | number
  /** 佔據的欄數（預設 1，超出 column 會被鉗制） */
  span?: number
}

Descriptions 描述列表 ​

基礎用法 ​

欄數與跨欄 ​

邊框模式 ​

自訂內容 ​

國際化 ​

API ​

Props ​

LhDescriptionsItem ​

Slots ​

無障礙 ​

類型定義 ​