<template> <PageWrapper title="详情组件示例"> <Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema" /> <Description class="mt-4" title="垂直示例" layout="vertical" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="2" :data="mockData" :schema="schema" /> <Description @register="register" class="mt-4" /> <Description @register="register1" class="mt-4" /> </PageWrapper> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Description, DescItem, useDescription } from '/@/components/Description/index'; import { PageWrapper } from '/@/components/Page'; const mockData: Recordable = { username: 'test', nickName: 'VB', age: 25, 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, PageWrapper }, setup() { const [register] = useDescription({ title: 'useDescription', data: mockData, schema: schema, }); const [register1] = useDescription({ title: '无边框', bordered: false, data: mockData, schema: schema, }); return { mockData, schema, register, register1 }; }, }); </script>