time-shaft

一个时间轴选择插件

GitHub项目地址

欢迎留言沟通: [e-mail]

demo演示

使用

• npm i time-shaft //安装包资源

全局注册方式

    //main.js中引入
    import TimeShaft from 'time-shaft'
    Vue.use(TimeShaft)

    //*.vue中 直接使用
    <time-shaft
        @getDateMessage="getDateMessage"
    >
    </time-shaft>
    export default {
        data() {
            return {}
        },
        methods:{
            // 当选时间时
            getDateMessage(value){
                console.log(value)
            }
        }
    }

单独使用

    //*.vue中 直接使用
    <template>
        <time-shaft
            @getDateMessage="getDateMessage"
        >
        </time-shaft>
    </template>
    // 引入组件
    import TimeShaft from 'time-shaft'
    export default {
        data() {
            return {}
        },
        methods:{
           // 当选时间时
            getDateMessage(value){
                console.log(value)
            }
        },
        // 注册组件
        components:{
            TimeShaft,
        }
    }

Options && Methods

Options

属性	说明	默认值
centerTime	初始时间(时间轴最中间)(Date)	当前时间
showTimeNumber	总轴显示刻度个数(Number)	24
dateType	时间格式	YYYY-MM-DD HH:mm
regionalScope	区域选中的范围(分钟)(Number)	120
isShowTime	拖动时是否实时展示选中时间(Boolean)	true
isTimeBtn	是否需要选择时间点按钮(Boolean)	true
isTimeRegion	是否需要选择时间区域(Boolean)	true
TimeAxislength	时间轴总时长(小时)(Number)	24
leftRightLength	左右切换时 切换的步长(小时)(Number)	1
isAutoRefresh	是否启动监听刷新(Boolean)	true
autoRefreshMinute	启动监听刷新间隔(分钟)(Number)	1
isShowRefresh	是否显示刷新按钮(Boolean)	true

• isAutoRefresh 自动刷新详解 -- 自动刷新表示时间轴会随着设定的刷新间隔进行整个时间的更新，当切换总轴的左右按钮时将停止刷新
• isShowRefresh 刷新按钮详解 -- 当点击总轴 左右切换时间按钮时，自动更新时间将被关闭，点击刷新按钮，回到当前时间并开启自动刷新功能

Methods

事件名称	说明	参数
getDateMessage	当改变时间触发	当前时间(Object)
outOfRange	移动左右箭头超出范围触发	无

getDateMessage参数详解 参数中含type字段 -- 可能出现的结果为 spot(拖动点触发) region(拖动区域触发) regionStretch(拉伸区域触发) autoRefresh(定时刷新触发) left(时间轴左侧箭头触发 注:切换左右按钮时间不发 生改变) right(时间轴右侧箭头触发 注:切换左右按钮时间不发生改变)

二次开发

• npm install //安装node运行环境

• npm run dev //启动项目

• npm run build //打包项目

仓库地址

GitHub项目地址https://github.com/HuXiaoTu/time-axis

目录结构描述

    ├─assets                    // 静态文件夹
    ├─css                       // 样式文件（字体图标）
    │  └─iconFont
    └─timeAxis                  // 组件开发区

V1.0.1 版本内容更新

1. 修复图标不显示问题 更新README

V1.0.2 版本内容更新

1. 修复超出范围提示功能样式问题

V1.0.4 版本内容更新

1. 增加刷新功能
2. 优化代码

V1.0.5 版本内容更新

1. 修复图标不能正常显示问题
2. 优化插件代码，减少体积

v1.0.10 版本内容更新

1. 去除超出范围提示框，增加超出范围事件
2. 优化包体积，优化样式