vue可拖拽进度条效果如何达成？
发布时间：2022-04-20 09:41:35 所属栏目：语言 来源：互联网
导读：vue可拖拽进度条效果如何实现？进度条是在web开发中经常会遇到的需求，那么可拖拽的进度条效果是如何实现的呢？这篇文章就给大家分享一下vue实现简单可拖拽进度条效果的代码实例。 组件代码： template div div class=slider ref=slider div class=process :
|
vue可拖拽进度条效果如何实现？进度条是在web开发中经常会遇到的需求，那么可拖拽的进度条效果是如何实现的呢？这篇文章就给大家分享一下vue实现简单可拖拽进度条效果的代码实例。 组件代码： <template> <div> <div class="slider" ref="slider"> <div class="process" :style="{ width }"></div> <div class="thunk" ref="trunk" :style="{ left }"> <div class="block"></div> <div class="tips"> <!-- <span>{{scale*100}}</span> --> <i class="fas fa-caret-down"></i> </div> </div> </div> <div> <button @click=" () => { //渲染到页面的时候 mounted() { this.slider = this.$refs.slider; this.thunk = this.$refs.trunk; var _this = this; this.thunk.onmousedown = function (e) { var width = parseInt(_this.width); var disX = e.clientX; document.onmousemove = function (e) { // value, left, width // 当value变化的时候，会通过计算属性修改left，width （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
