element时间轴,element时间控件
本文主要介绍了元素时间线时间线的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
目录
组件—时间线定义节点样式定义时间戳
组件—时间线
基础用法
div class=block
收音机
排序:
el-radio-group v-model=reverse
el-radio :label=true 倒序/el-radio
el-radio :label=false 正序/el-radio
/el-radio-group
/div
el-timeline :reverse=reverse
埃尔-时间线-项目
活动中的v-for=(活动,索引
:key=index
:时间戳=activity.timestamp
{{activity.content}}
/El-时间线-项目
/El-时间线
/div
脚本
导出默认值{
data() {
返回{
反:真的,
活动:[{
内容: 活动按期开始,
时间戳:"2018-04-15"
}, {
内容: 通过审核,
时间戳:"2018-04-13"
}, {
内容: 创建成功,
时间戳:"2018-04-11"
}]
};
}
};
/脚本
定义节点样式
div class=block
埃尔-时间线
埃尔-时间线-项目
活动中的v-for=(活动,索引
:key=index
:icon=activity.icon
:type=activity.type
:color=activity.color
:size=activity.size
:时间戳=activity.timestamp
{{activity.content}}
/El-时间线-项目
/El-时间线
/div
脚本
导出默认值{
data() {
返回{
活动:[{
内容: 支持使用图标,
时间戳: 2018-04-12 20:46 ,
尺寸:"大",
类型:"主要",
图标:“El-icon-更多"
}, {
内容: 支持自定义颜色,
时间戳:"2018-04-03 20:46",
颜色: #0bbd87
}, {
内容: 支持自定义尺寸,
时间戳:"2018-04-03 20:46",
尺寸:"大"
}, {
内容: 默认样式的节点,
时间戳:"2018-04-03 20:46"
}]
};
}
};
/脚本
定义时间戳
div class=block
埃尔-时间线
El-时间线-项目时间戳=2018/4/12 位置=顶部
电子贺卡
h4更新开源代码库模板/h4
p王小虎提交于2018/4/12 20:46/p
/电子名片
/El-时间线-项目
El-时间线-项目时间戳=2018/4/3 位置=顶部
电子贺卡
h4更新开源代码库模板/h4
p王小虎提交于2018/4/3 20:46/p
/电子名片
/El-时间线-项目
El-时间线-项目时间戳=2018/4/2 位置=顶部
电子贺卡
h4更新开源代码库模板/h4
p王小虎提交于2018/4/2 20:46/p
/电子名片
/El-时间线-项目
/El-时间线
/div
时间轴属性
时间线项目属性
时间轴-项目槽
到此这篇关于元素时间线时间线的实现的文章就介绍到这了,更多相关元素时间线时间线内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。