在vue2.0 中制作時間軸拖動組件

目前做的都是一些數據可視化的項目，使用的是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 開發中我們時常會遇到一些意想不到的問題，是我們技術的卑微，也是我們初來乍到。但請在技術面前用你認真的眼神祈求它對你溫柔以待。

我一生的職業只有一個，那就是：學生
不知道這條路上有多少位同學陪學習一同終生走下去。