time-shaft v1.0.10

time-shaft

一个时间轴选择插件

GitHub项目地址

欢迎留言沟通: 13676373110@163.com

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

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

Methods

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. 优化包体积，优化样式