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

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

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

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

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();

}

},

}

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

我一生的职业只有一个，那就是：学生

不知道这条路上有多少位同学陪学习一同终生走下去。