更新记录
1.0.1(2024-10-30)
下载此版本
修复头像动态设置
1.0.0(2024-10-29)
下载此版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.0 app-vue app-nvue |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
1.0.0 |
qhhh-timeline
插件地址:https://ext.dcloud.net.cn/plugin?id=20813
若能帮到你请高抬贵手点亮5颗星~
使用说明
属性 |
是否必填 |
值类型 |
默认值 |
说明 |
list |
是 |
Array |
- |
数据列表 |
isAvatar |
否 |
Boolean |
true |
是否显示头像 |
dotColor |
否 |
String |
#1890FF |
圆圈的颜色 |
lineColor |
否 |
String |
#f0f0f0 |
线的颜色 |
以下演示为vue使用方式,如不清楚可点击右侧导入示例项目有详细演示代码。
vue:
<qhhh-timeline :list="list" @handleClick="handleClick"/>
export default {
data() {
return {
list: [{
avatar: "",
content: "开发了A模块",
time: "2024-10-23 19:52:38",
name: "张三",
id: "1",
}, {
avatar: "",
content: "开发了B模块",
time: "2024-10-24 19:52:38",
name: "李四",
id: "2",
}, {
avatar: "",
content: "开发了C模块,并修改了样式",
time: "2024-10-25 19:52:38",
name: "王麻子",
id: "3",
}]
}
},
methods: {
handleClick(item){
console.log('点击了:',item)
}
}
}
温馨提示
- 时间线组件
- 如说明表达还不够清楚,不清楚怎么使用可导入完整示例项目运行体验和查看
- 欢迎留言,进行改进组件。