vue时间轴组件横向,vue 时间控件
这篇文章主要为大家详细介绍了vue。j实现时间轴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j实现时间轴功能的具体代码，供大家参考，具体内容如下
开源代码库
时间轴组件封装
主页。射流研究…
模板
div class=时间线-主
div class=时间轴-坐标轴
div class=轴项目
v-for=(time，index) in dateTimes
:key=index
div class=轴-项目-刻度
:class= { axis-item-tick-active :index===突出显示索引}
@mouseenter=hoverIndex=index
@mouseleave=hoverIndex=-1
@click=tickClick(time，index)
/div
div class=轴项目标签
v-if=日期时间索引。(index)=0的索引
{{ time }}/div
div class=轴-项目-提示
v-if= index===高亮索引 index===悬停索引
{{ time }}/div
/div
/div
div class=时间轴-控件
菜单-图标图标-左侧
:class= { menu-icon-disabled :playing }
@click=backward/i
菜单图标
:class={icon-play :正在播放，"图标暂停":正在播放}"
@click=togglePlay
@mouseleave=hoverIndex=-1/i
菜单-图标图标-右侧
:class= { menu-icon-disabled :playing }
@click=forward/i
我会的菜单图标图标向上
:class= { menu-icon-disabled :playing }
@click=speedSlow/i
我
菜单图标速度“{ options。速度} }/I
菜单图标图标向下
:class= { menu-icon-disabled :playing }
@click=speedQuick/i
/div
/div
/模板
脚本
从导入{日期格式}./util/formatdate.js //日期格式化
导出默认值{
data() {
返回{
intervalTimer: null，//定时器
日期时间索引：[],//日期列表
播放：假，//播放
activeIndex: 0，//当前的时间位置
hoverIndex: 0 //鼠标移入的时间位置
}
},
道具：{
选项：{
类型：对象，
默认(){
返回{}
}
},
日期时间：{
类型：数组，
默认(){
return []
}
},
间隔：{
类型：数量，
默认(){
返回100
}
}
},
计算值：{
highlightIndex() {
返回（
(这个。活跃指数===-1这个。日期时间。长度-1)
this.activeIndex
)
}
},
观察：{
选项：{
处理程序(){
this.renderTimeline()
},
深：真的
},
正在播放(){
if (this.playing) {
这个。interval timer=setInterval(()={
这个。活跃指数=(这个。主动索引1)% this。日期时间。长度
}，this.options.speed * 1000)
}否则{
if (this.intervalTimer) {
清除间隔(这个。间隔计时器)
this.intervalTimer=null
}
}
},
activeIndex() {
const time=this。日期时间[这个。活动索引].拆分("")[0]
这个. emit(getDateFun ，time)
}
},
已安装(){
this.renderTimeline()
让那个=这个
window.onresize=function () {
that.renderTimeline()
}
},
过滤器：{
格式日期时间（日期时间){
dateTime=dateFormat(日期时间， MM.dd )
返回日期时间
}
},
方法：{
/**
* @姓名：初始化时间轴
*/
renderTimeline() {
//时间轴的宽度
const timelineWidth=this .$el.offsetWidth - 40
//日期个数
const日期乘以大小=this。日期时间。长度
//如果时间全部显示，时间轴的理想宽度
常量日期时间宽度=日期时间大小*这个. interval
//如果时间轴的宽度小于理想宽度
if(时间线宽度=日期时间宽度){
这个。日期时间索引=this。日期时间。映射((日期时间，索引)={
回报指数
})
返回
}
//当前时间轴的宽度最大能容纳多少日期刻度
常数最大刻度=数学。楼层(时间线宽度/本。区间)
//间隔刻度数
常数间隙刻度=数学。下限(日期乘以大小/最大点数)
//记录需要显示的日期索引
this.dateTimeIndexes=[]
对于(设t=0；t=maxTickst ) {
这个。日期时间索引。推(t *间隙刻度)
}
const len=this。日期时间索引。长度
//最后一项需要特殊处理
if (len 0) {
const last index=this。日期时间索引[len-1]
if(最后一个索引间隙标记日期乘以大小-1){
这个。日期时间索引[len-1]=日期时间大小-1
}否则{
this.dateTimeIndexes.push(日期时间大小- 1)
}
}
},
/**
* @姓名：点击刻度
* @param {time}
* @param {index}
*/
滴答滴答(时间，索引){
if (this.playing) {
返回
}
this.activeIndex=index
},
/**
* @姓名：播放和暂停
*/
togglePlay() {
this.playing=！这个。播放
},
/**
* @姓名：时间退后一日
*/
向后(){
if (this.playing) {
返回
}
这个。主动指数=这个。活动索引-1
if (this.activeIndex===-1) {
这个。主动指数=这个。日期时间。长度-1
}
},
/**
* @姓名：时间前进一日
*/
forward() {
if (this.playing) {
返回
}
这个。活跃指数=(这个。主动索引1)% this。日期时间。长度
},
/**
* @姓名：减慢速度
*/
speedSlow() {
如果(这个。玩 这个。选项。速度=这个。选项。最大速度){
返回
}
this.options.speed=this。选项。速度1
},
/**
* @姓名：加快速度
*/
speedQuick() {
如果(这个。玩 这个。选项。速度=1){
返回
}
这个。选项。速度=这个。选项。速度-1
}
}
}
/脚本
样式范围的语言=scss 。时间轴-主视图{
填充：10px
框大小：边框-框；时间轴-轴{
位置：相对；
显示器：flex
justify-content:space-around；
填充：8px 0；
*之前{
内容："";
宽度：100%;
高度：10px
位置：绝对；
左：0;
底部：8px
显示：内嵌-块；
背景：rgba(0，0，0，0.5)；
}。轴-项目{
位置：相对；
显示器：flex
伸缩方向：列；
对齐-项目：居中；坐标轴-项目-刻度{
显示：内嵌-块；
宽度：4px
高度：20px
背景：rgba(0，0，0，0.5)；
过渡：背景0.3秒
光标：指针；
：悬停{
背景：# 000;
}
}。坐标轴-项目-刻度-活动{
背景：# 000;
}。坐标轴-项目-标签{
位置：绝对；
底部：-30px；
空白：nowrap
}。轴-项目-提示{
位置：绝对；
顶：-25px；
填充：2px 6px
边框-半径：2px
背景：rgba(0，0，0，0.5)；
空白：nowrap
颜色：# fff
}
}
}。时间轴-控件{
边距-顶部：40px
文本对齐：居中；
我{
光标：指针；
显示：内嵌-块；
字体样式：正常；
}。菜单图标{
字体大小：20px
宽度：20px
高度：20px
背景-尺寸：封面；
背景-重复：不重复；图标-左侧{
背景图像：url(./资产/图标-左侧。png’)；
}。图标-右侧{
背景图像：url(./资产/图标-右。png’)；
}。图标播放{
背景图像：url(./资产/图标-播放。png’)；
}。图标-暂停{
背景图像：url(./资产/图标-暂停。png’)；
}。图标向上{
背景图像：url(./资产/图标向上。png’)；
}。图标向下{
背景图像：url(./资产/图标-向下。png’)；
}。菜单-图标-禁用{
光标：不掉线；
不透明度：0.5;
}
}
}
}
/风格
使用组件
App.vue
模板
差异
氘
style= margin:0；文本对齐：居中；
{{this.date}}
/h2
Main :options=options
：日期时间=日期时间
@getDateFun=getDateFun
:interval=interval/Main
/div
/模板
脚本
从导入{日期格式} ./util/formatdate.js
从导入总管。/组件/主要
导出默认值{
名称："应用程序",
data() {
返回{
日期： ,
选项：{
速度：1,//速度
speedMax: 10 //速度最大值
},
间隔：20,//日期间的间隔
日期时间：[
03-04,
03-05,
03-06,
03-07,
03-08,
03-09,
03-10,
03-11,
03-12,
03-13
]
}
},
组件：{
主要的
},
已安装(){
//获取最近10 天的日期
let list=[]
对于(设I=0；i 10i ) {
list.unshift(
日期格式（
新日期（
新日期()。设置日期(新日期()。getDate() - i)
).toLocaleDateString()，
MM-dd
)
)
}
this.date=list[0]
this.dateTimes=list
},
方法：{
//接收父组件传值
getDateFun(时间){
console.log(时间)
this.date=时间
},
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。