在vue2.0 中制作时间轴拖动组件 - 维森 - 博客园

安宇雨 - 随手采集
2019-09-24 21:41:48
随手采集
0000-未整理-等待研究

目前做的都是一些数据可视化的项目，使用的是vue框架，其中用到了d3.js、three.js、echarts。

在vue框架下我们会遇到很多让人心累的时刻，谁用谁知道。

项目过程中有遇到这样的一个组件

时间轴组件

这个组件要求是可以拖动，但是在vue中使用jquery 来操作dom，我在第一遍这样去使用的时候发现页面会很卡。

<template>
    <div class="time-axis">
            <div class="axis-scoll" id="bar1">
                <ul class="axis" :style="{width: ( 1.04 * time.length) + 'rem'}">
                    <li class="item" v-for="(item,index) in time">{{item}}</li>
                </ul>
                <span class="drag-btn" id="btn1"></span>
            </div>
    </div>
</template>
<script>
import historData from '../historData'
export default {
    data () {
        return {
            time: ['06.06','06.07','06.08','06.09','06.10','06.11','06.12'],
                        historIsShow: false,
                        dragNum: 0
        }
    },
    mounted () {
            this.scale('btn1', 'bar1');
    },
    methods: {
         scale:function (btna, bara, titlea) {
            // 这个函数的作用是用来操作时间轴滑动
            let _this = this;
            let btn = document.getElementById(btna);
            let bar = document.getElementById(bara);
            function init () {
                var g = document, b = window, m = Math;
                btn.onmousedown = function (e) {
                    var x = (e || b.event).clientX;
                    var l = this.offsetLeft;
                    var max = bar.offsetWidth - this.offsetWidth;
                    console.log(this.offsetWidth)
                    g.onmousemove = function (e) {
                        var thisX = (e || b.event).clientX;
                        var to = m.min(max, m.max(-2, l + (thisX - x)));
                        btn.style.left = to + 'px';
                        ondrag(m.round(m.max(0, to / max) * 100));
                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                    };
                    g.onmouseup = new Function('this.onmousemove=null');
                };
            };
            function ondrag (pos) {
                // 在这里设置一个值给data()里面的dragNum为后面做滑块位置判断操作提供铺垫
                _this.dragNum = pos / 10 + '';
            }
            init();
        }
    },
}
</script>

vue 开发中我们时常会遇到一些意想不到的问题，是我们技术的卑微，也是我们初来乍到。但请在技术面前用你认真的眼神祈求它对你温柔以待。