您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文将为大家详细介绍“vue实现拖拽进度条的方法”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“vue实现拖拽进度条的方法”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
具体内容如下
组件代码:
<template> <div> <div class="slider" ref="slider"> <div class="process" :></div> <div class="thunk" ref="trunk" :> <div class="block"></div> <div class="tips"> <!-- <span>{{scale*100}}</span> --> <i class="fas fa-caret-down"></i> </div> </div> </div> <div> <button @click=" () => { this.per++; } " > +</button >{{ per }}%<button @click=" () => { if (this.per > 0) { this.per--; } } " > - </button> </div> </div> </template> <script> /* * min 进度条最小值 * max 进度条最大值 * v-model 对当前值进行双向绑定实时显示拖拽进度 * */ export default { props: ["min", "max", "value"], data() { return { slider: null, //滚动条DOM元素 thunk: null, //拖拽DOM元素 per: this.value, //当前值 }; }, //渲染到页面的时候 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 // 拖拽的时候获取的新width var newWidth = e.clientX - disX + width; // 拖拽的时候得到新的百分比 var scale = newWidth / _this.slider.offsetWidth; _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min); _this.per = Math.max(_this.per, _this.min); _this.per = Math.min(_this.per, _this.max); _this.$emit("input", _this.per); }; document.onmouseup = function () { document.onmousemove = document.onmouseup = null; }; return false; }; }, computed: { // 设置一个百分比,提供计算slider进度宽度和trunk的left值 // 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width // trunk left = slider进度width + trunk宽度/2 scale() { return (this.per - this.min) / (this.max - this.min); }, width() { if (this.slider) { return this.slider.offsetWidth * this.scale + "px"; } else { return 0 + "px"; } }, left() { if (this.slider) { return ( this.slider.offsetWidth * this.scale - this.thunk.offsetWidth / 2 + "px" ); } else { return 0 + "px"; } }, }, }; </script> <style> .box { margin: 100px auto 0; width: 80%; } .clear:after { content: ""; display: block; clear: both; } .slider { user-select: none; position: relative; margin: 20px 0; width: 400px; height: 10px; background: #e4e7ed; border-radius: 5px; cursor: pointer; } .slider .process { position: absolute; left: 0; top: 0; width: 112px; height: 10px; border-radius: 5px; background: #81b159; } .slider .thunk { position: absolute; left: 100px; top: -7px; width: 20px; height: 20px; } .slider .block { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #409eff; background: rgba(255, 255, 255, 1); transition: 0.2s all; } .slider .tips { position: absolute; left: -7px; bottom: 30px; min-width: 15px; text-align: center; padding: 4px 8px; /* background: #000; */ border-radius: 5px; height: 24px; color: #fff; } .slider .tips i { position: absolute; margin-left: -5px; left: 50%; bottom: -9px; font-size: 16px; color: #000; } .slider .block:hover { transform: scale(1.1); opacity: 0.6; } </style>
调用:
<template> <slider :min="0" :max="100" v-model="per"></slider> </template> <script> import slider from "@/components/slider"; export default { data() { return {}; }, computed: { per: { get() { return 0; }, set(val) { console.log(val); }, }, }, components: { slider }, mounted() {}, methods: {}, }; </script> <style > </style>
如果你能读到这里,小编希望你对“vue实现拖拽进度条的方法”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。