108 lines
2.4 KiB
Vue
108 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
// 示例数据
|
|
const demoData = ref([
|
|
{ label: '用户名', content: 'zhangsan', span: 1 },
|
|
{ label: '邮箱', content: 'zhangsan@example.com', span: 1 },
|
|
{ label: '手机号', content: '123456789', span: 1 },
|
|
{ label: '地址', content: '北京市海淀区中关村', span: 1 },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-container">
|
|
<!-- 1. Row 布局 -->
|
|
<div class="demo-block">
|
|
<h3>Row 布局</h3>
|
|
<ADescriptionsGroup
|
|
:data="demoData"
|
|
layout="row"
|
|
title="Row Layout"
|
|
:columns="3"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 2. Row Vertical 布局 -->
|
|
<div class="demo-block">
|
|
<h3>Row Vertical 布局</h3>
|
|
<ADescriptionsGroup
|
|
:data="demoData"
|
|
layout="row-vertical"
|
|
title="Row Vertical Layout"
|
|
:columns="3"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 3. Column 布局 -->
|
|
<div class="demo-block">
|
|
<h3>Column 布局</h3>
|
|
<ADescriptionsGroup
|
|
:data="demoData"
|
|
layout="column"
|
|
title="Column Layout"
|
|
:columns="3"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 4. Column Vertical 布局 -->
|
|
<div class="demo-block">
|
|
<h3>Column Vertical 布局</h3>
|
|
<ADescriptionsGroup
|
|
:data="demoData"
|
|
layout="column-vertical"
|
|
title="Column Vertical Layout"
|
|
:columns="3"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 5. 单独使用 ADescriptions -->
|
|
<div class="demo-block">
|
|
<h3>ADescriptions 单独使用</h3>
|
|
<ADescriptionsGroup title="单独 Descriptions" :columns="3">
|
|
<ADescriptions label="用户名">
|
|
zhangsan
|
|
</ADescriptions>
|
|
<ADescriptions label="邮箱">
|
|
zhangsan@example.com
|
|
</ADescriptions>
|
|
<ADescriptions label="手机号">
|
|
123456789
|
|
</ADescriptions>
|
|
<ADescriptions label="地址">
|
|
<div style="background-color: red;">
|
|
测试
|
|
</div>
|
|
</ADescriptions>
|
|
</ADescriptionsGroup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
gap: 40px;
|
|
}
|
|
|
|
.demo-block {
|
|
width: 80%;
|
|
max-width: 900px;
|
|
background: #fff;
|
|
padding: 20px 30px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.demo-block h3 {
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
</style>
|