Vue封装一个刻度尺组件,可滑动,显示刻度设置默认刻度

 <div ref="Hello" class="c-slide f-inline-block" @mousemove="mousemove" @click="a"><div class="slide-runway"  ref="name"  ><div class="slide-bar" ref="bar" :style="{width: x}"></div><div class="c-slide-button slide-btn"  ref="tu" :style="{left:x}"  @mousedown="move"><div class="c-slide-tooltip tooltip" >{{title}}</div></div></div><div class="slide-rule f-cl" style="display:flex"><span class="rule f-fl" style="width: 10%;">130以下</span><span class="rule f-fl rule-bg" style="width: 10%;" v-for="item in data" :key="item">{{item}}</span>               <span class="rule f-fl " style="width: 10%;">210以上</span></div>   </div>

实现效果

js部分

//设置默认数据Initial() {//初始化获取元素宽度let TotalWidth = this.$refs.name.clientWidth;//将数据划分let PerWidth = TotalWidth / 100;//调用默认身高this.linearAnimation(PerWidth, PerWidth * 40);},//初始化自动移动linearAnimation(step, target) {let intervalID = null;let begin = 0,step_len = step || 0;clearInterval(intervalID);intervalID = setInterval(() => {begin += step_len;if (begin >= target) {begin = target;clearInterval(intervalID);}// box.style.marginLeft = begin + "px";this.$refs.bar.style.width = begin + "px";this.$refs.tu.style.left = begin + "px";this.CalculatedWidth(begin);}, 50);},//计算实际所占比(显示框)CalculatedWidth(w) {//初始化获取元素宽度let TotalWidth = this.$refs.name.clientWidth;console.log("初始化h", TotalWidth);//将数据划分let PerWidth = TotalWidth / 100;//小小格子let smallWidth = PerWidth / 10;// 实际占比 实占多少格let WWidth = parseInt(w / PerWidth);//判断区间if (w <= PerWidth * 10) {this.title = "小于130";return;} else if (w >= PerWidth * 90) {this.title = "大于210";return;} else if (WWidth >= WWidth + PerWidth / 2) {WWidth = WWidth + 1;this.title = WWidth + 120 + "cm";return;} else if (WWidth <= WWidth + PerWidth / 2) {WWidth = WWidth;this.title = WWidth + 120 + "cm";return;} else if (WWidth == WWidth) {this.title = WWidth + 120 + "cm";return;}},move(event) {let odiv = event.target; //获取目标元素let fdiv = odiv.parentNode;let xdiv = fdiv.firstChild;let tdiv = this.$refs.tu;let disX = event.clientX - odiv.offsetLeft;document.onmousemove = e => {//鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;//获取实际宽度let OriginalWidth = this.$refs.name.clientWidth;if (left <= OriginalWidth && left >= 0) {this.CalculatedWidth(left);let bfb = left / OriginalWidth + "%";let a = this.mousemove(event);let z = a + "%";this.x = z;//移动当前元素xdiv.style.width = left + "px";tdiv.style.left = left + "px";}};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;};},a(event) {//获取let a = this.mousemove(event);if (event.offsetX == a) {event.offsetX == event.offsetX;}this.CalculatedWidth(event.offsetX);let z = a + "%";this.x = z;},mousemove(event) {//获取实际宽度let OriginalWidth = this.$refs.name.clientWidth;let a = event.offsetX;let c = a / OriginalWidth;let d = (c * 100).toFixed(4);let realVal = parseFloat(d).toFixed(4);if (realVal >= 100) return realVal == 100;return realVal;}

css样式

* {box-sizing: border-box;
}
.f-inline-block {display: inline-block;
}
.a {height: 16px;padding: 10px;background-color: #4d4d4d;
}.f-cl:after,
.f-cl:before {display: table;content: "";
}
.f-cl:after {clear: both;
}
.f-cl:before {clear: both;
}
.f-fl {float: left;
}
.c-slide {user-select: none;background-color: #f4f4f4;border-radius: 4px;width: 510px;height: 100px;cursor: pointer;padding: 14px 14px 0;
}
.c-slide .slide-runway {width: 100%;height: 6px;position: relative;background-color: #d8d8d8;
}
.c-slide .slide-bar {height: 6px;position: absolute;left: 0;top: 0;background-color: #9463f7;z-index: 1;
}
.c-slide .slide-btn {position: absolute;top: -4px;transform: translateX(-50%);z-index: 2;
}
.c-slide .rule {display: block;float: left;color: #333333;font-size: 11px;padding: 2px 0 0 3px;line-height: 14px;
}
.c-slide .rule:last-child {position: relative;
}
.c-slide .rule:last-child::before {content: "";position: absolute;display: block;width: 0;height: 10px;border-left: 1px solid #4d4d4d;top: 0;left: 0;
}
.c-slide .rule-bg {background: url(../assets/images/rule.079996f.png) no-repeat;
}
.c-slide-button {border: 3px solid #9463f7;width: 14px;height: 14px;border-radius: 50%;background-color: #fff;position: relative;
}
.c-slide-button .tooltip {transform: translate(-46%, -150%);
}
.c-slide-tooltip {padding: 5px;box-shadow: 0px 0px 4px 0px rgba(163, 163, 163, 0.36);border-radius: 4px;background-color: #fff;display: inline-block;color: #333333;white-space: nowrap;font-size: 12px;position: absolute;
}
.c-slide-tooltip:before {content: "";position: absolute;width: 0;height: 0;border-width: 5px;border-style: solid;border-color: transparent;border-left-color: #fff;border-bottom-color: #fff;transform: rotate(-45deg) translateX(-50%);bottom: 0px;box-shadow: -1px 1px 4px 0px rgba(163, 163, 163, 0.36);left: 50%;
}

《程序员》曾陪伴了无数开发者成长。《新程序员》全新归来，推荐给大家！
结语:

不管多么险峻的高山，总是为不畏艰难的人留下一条攀登的路。