83 lines
1.8 KiB
Markdown
83 lines
1.8 KiB
Markdown
# InstitutionalItem 建制数据项组件
|
||
|
||
一个用于展示建制数据的可复用组件。
|
||
|
||
## 功能特性
|
||
|
||
- 展示建制项目的详细信息
|
||
- 支持查看详细功能
|
||
- 响应式布局
|
||
- 统一的样式风格
|
||
|
||
## 使用方法
|
||
|
||
### 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<institutional-item
|
||
v-for="(item, index) in institutionalData"
|
||
:key="index"
|
||
:item="item"
|
||
:index="index"
|
||
@view-detail="handleViewDetail"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import InstitutionalItem from './components/institutional-item.vue'
|
||
|
||
export default {
|
||
components: {
|
||
InstitutionalItem,
|
||
},
|
||
methods: {
|
||
handleViewDetail(data) {
|
||
console.log('查看详细:', data.item)
|
||
// 处理查看详细逻辑
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Props
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| ----- | ------ | ------ | ---------- |
|
||
| item | Object | {} | 数据项对象 |
|
||
| index | Number | 0 | 数据索引 |
|
||
|
||
### item 对象结构
|
||
|
||
```javascript
|
||
{
|
||
topLeft: '2023年 项目名称', // 左上角显示内容
|
||
topRight: '进行中', // 右上角显示内容
|
||
bottomLeft: '建造金额：100万', // 左下角显示内容
|
||
bottomRight: '捐赠人数：50人' // 右下角显示内容
|
||
}
|
||
```
|
||
|
||
## Events
|
||
|
||
| 事件名 | 参数 | 说明 |
|
||
| ----------- | --------------- | ------------------ |
|
||
| view-detail | { item, index } | 点击查看详细时触发 |
|
||
|
||
## 样式说明
|
||
|
||
- 组件使用统一的建制风格
|
||
- 背景色：`#FFFBF5`
|
||
- 边框：`1px solid #C7A26D`
|
||
- 圆角：`11px`
|
||
- 高度：`180rpx`
|
||
|
||
## 注意事项
|
||
|
||
1. 组件会自动处理空值，显示"暂无数据"
|
||
2. 点击"查看详细"会触发 `view-detail` 事件
|
||
3. 样式与建制页面保持一致
|