# Description 詳情組件 對 `antv` 的 Descriptions 組件進行封裝 ## Usage ```vue <template> <div class="p-4"> <Description title="基礎示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema" /> <Description @register="register" class="mt-4" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Alert } from 'ant-design-vue'; import { Description, DescItem, useDescription } from '/@/components/Description/index'; const mockData: any = { username: 'test', nickName: 'VB', age: 123, phone: '15695909xxx', email: '190848757@qq.com', addr: '廈門市思明區', sex: '男', certy: '3504256199xxxxxxxxx', tag: 'orange', }; const schema: DescItem[] = [ { field: 'username', label: '用戶名', }, { field: 'nickName', label: '昵稱', render: (curVal, data) => { return `${data.username}-${curVal}`; }, }, { field: 'phone', label: '聯系電話', }, { field: 'email', label: '郵箱', }, { field: 'addr', label: '地址', }, ]; export default defineComponent({ components: { Description, Alert }, setup() { const [register] = useDescription({ title: 'useDescription', data: mockData, schema: schema, }); return { mockData, schema, register }; }, }); </script> ``` ## useDescription 參考以上示例 ```ts const [register] = useDescription(Props); ``` ## Props ::: tip 溫馨提醒 除以下參數外，官方文檔內的 props 也都支持，具體可以參考 [antv Description](https://2x.antdv.com/components/descriptions-cn/#API) ::: | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | title | `string` | - | - | 標題 | | size | `string` | small | - | 大小 | | bordered | `boolean` | true | - | 是否展示邊框 | | column | `Number, Object` | `{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | - | 一行的 `DescriptionItems` 數量 | | useCollapse | `boolean` | - | - | 是否包裹 CollapseContainer 組件 | | collapseOptions | `Object` | - | - | `CollapseContainer` 組件屬性 | | schema | `DescItem[]` | - | - | 詳情項配置，見下方 `DescItem` 配置 | | data | `object` | - | - | 數據源 | ## DescItem | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | field | `string` | - | - | 字段名 | | label | `string` | - | - | 標簽名 | | labelMinWidth | `number` | - | - | label 最小寬度 | | contentMinWidth | `number` | - | - | content 最小寬度 | | labelStyle | `any` | - | - | label 樣式 | | span | `number` | - | - | 和并列數量 | | show | `(data)=>boolean` | - | - | 動態判斷當前組件是否顯示 | | render | `(val: string, data: any)=>VNode,undefined,Element,string,number` | - | - | 自定義渲染 content |