Situation-Awareness-Platform-Frontend/src/components/MilestoneItem

MilestoneItem组件

说明

1. MilestoneItem组件使用场景为里程碑列表

• 时间、进度条、编辑行、描述都可插槽使用，具体见下表

2. MilestoneItem使用demo

  <milestone-item
  :data="milestoneItemData"
  @handle-edit="handleEdit"
  @handle-close="handleClose"
  @handle-deleted="handleDeleted"
  >
  </milestone-item>

const milestoneItemData = [{
  title: '1.x',
  desc: '完成第一个版本发布的相关功能，包括环境搭建、功能测试及 bug 修复等',
  endTime: '2023-07-10',
  updateTime: '2023-07-10',
  finishPercent: 40,
  openNum: 132,
  closeNum: 88,
  canEdit: true
},
{
  title: '1.x',
  desc: '完成第一个版本发布的相关功能，包括环境搭建、功能测试及 bug 修复等',
  endTime: '2023-07-10',
  updateTime: '2023-07-10',
  finishPercent: 40,
  openNum: 132,
  closeNum: 88,
  canEdit: false
}
];

const handleEdit = (item:object, index:number) => {
  
};
const handleClose = (item:object, index:number) => {
  
};
const handleDeleted = (item:object, index:number) => {
  
};

Props

参数	说明	类型	可选值	默认值
data	里程碑列表（见下表Props(data)）	array
processColor	进度条颜色	string

Props(data)

参数	说明	类型	可选值	默认值
title	里程碑列表	string
desc	进度条颜色	string
endTime	截止时间	string		暂无截止时间
updateTime	更新时间	string		暂无更新时间
finishPercent	完成百分比	number		0
openNum	开启数	number		0
closeNum	关闭数	number		0
issuesText	issues自定义文案	string		issues
canEdit	是否编辑模式	boolean		false
typeIcon?	标题前icon	boolean		false
hideTypeIcon?	是否隐藏标题前icon	boolean		false

Slots

名称	说明
body	body内容插槽，可覆盖盒子中所有内容
handle	编辑区域插槽
desc	描述区域插槽
time	时间区域插槽
right	右侧进度条区域插槽

Event

名称	说明
handleEdit	点击编辑按钮触发，返回item对象和index
handleClose	点击关闭里程碑按钮触发，返回item对象和index
handleDeleted	点击删除按钮触发，返回item对象和index