82 lines
1.6 KiB
Markdown
82 lines
1.6 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. 样式与建制页面保持一致
|