vue range 双向滚动取中间值

前天，一个同事像我咨询一个问题：
“hi, shunzi,你弄过vux中的那种range没有，但是比那个要复杂一点，需要支持左右两边滑，取中间的区间值？”
“没有呢”
“啊，我们有这样一个需求，需要支持左右滑动，取区间，我改vux的range改得有bug哇，你能不能帮我看看，或者封装一个”
“给你个眼神自己体会，刚好我现在不是很忙，可以看看”
“好的，麻烦你了，到时请你吃饭哇”

背景

背景需求大概就是这样，需要一个vue的插件，支持左右滑动，取他的区间值，vux的range,最开始，我也准备改造一下这个插件，发现自己太渣了，改了半天，事件绑定都乱套了，就自己写一个算了。

思路讲解

插件其实就好比在一个管道里，有两个小球，两个小球，在获取焦点的时候，能够左右滑动
在管道长度固定的情况下（100%），
- 左边的小球不可能滚到右边小球的右边，右边小球不能滚到左边小球的左边，临界点在于他们相碰
- 左边小球相对管道左端距离的百分比(left)乘以管道的总长(maxNumber-minNumber)，就是最小值【min】
- 右边小球相对管道右端距离的百分比(right)乘以管道的总长(maxNumber-minNumber)，就是球距右端的距离，然后用管长减去这个距离(maxNumber-minNumber)*（1-right）就是【max】

- 最后取得的min/max，有可能是小数，那么，我们应该还要支持用户自定义保留几位小数【pointLen】

核心代码展示

# 父组件
<div class="contanier"><vueRange :min-num="0" :max-num="5000" point-len="0"/>
</div>components: {
'vueRange': () =>import ('@/component/vue_range/range.vue'),
},# 子组件
export default {props: {minNum: "",maxNum: "",pointLen: 0},data() {return {minNumber: this.minNum || 0, //最小值maxNumber: this.maxNum || 100, //最大值_width: 0, //屏幕的宽度dist: 0, //矫正系数left: 0, //handle min 的left偏移量right: 0, //handle max 的right偏移量};},mounted() {this._width = this.$refs.bar.clientWidththis.dist = this.$refs.min.clientWidth / this._width * 100},methods: {move(event, type) {var _left = (event.targetTouches[0].clientX - 10) / this._width * 100;if (type == 'min') {// 当前最小值不能大于最大值，且不能小于0if ((_left + this.right) > 100 || _left < 0) {return;} else {this.left = _left;}} else {// 当前最大值不能小于最小值，且不能大于100if (this.left > _left || _left >= 100) {return;} else {this.right = 100 - _left;}}},},computed: {min() {return ((this.maxNumber - this.minNumber) * this.left / 100).toFixed(this.pointLen);},max() {return ((this.maxNumber - this.minNumber) * (100 - this.right) / 100).toFixed(this.pointLen);}}
}

待优化

在区间很大的情况下，左右小球滑动到一起，虽然不能在向中间靠拢，但是最小值并不等于最大值
在手机上面，小球获取焦点，不是那么顺畅，有时感觉按不住
实际中，最后计算出的最大值、最小值，应该传值到父组件中，这个暂时没有涉及，如果需要，可以传递一个方法，在这个组件中，对min/max进行计算，只要一个发生改变，就emit这个方法，然后在父组件中接收

参考

vux的Range
vux的Range源码
源码地址
更多精彩，请关注订阅号韶华随记

ps: 如果你也有一些搞不定的小需求，可以联系我，如果时间允许，我也是很乐意能帮助到你（微信号与昵称相同）。当然，如果你不想让我死宅在家里，可以面个基or吃个饭or喝个茶,当然最好是给我介绍个女朋友

vue range 双向滚动取中间值相关推荐

vue：实现锚点双向滚动/文章章节联动滚动效果
需求描述需要实现类似doc中文档大纲的效果,点击对应章节的名称时定位到相应的正文:而当正文滚动时,高亮显示对应的章节名称实现思路其实笔者一开始想到的是利用a标签页内跳转(也就是"锚点& ...
vue中过滤器比较两个数组取相同值
在vue中需要比较两个数组取相同值一个大数组一个小数组,小数组是大数组的一部分取相同ID的不同name值有两种写法,两个for循环和map写法 const toName = (ids, arr) ...
学习vue的双向数据绑定的原理
1. vue数据双向绑定的原理. 2. 实现简单版vue的过程,主要实现{{}}.v-model和事件指令的功能. vue数据双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式 ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 代码演示:defineProp ...
记录vue的双向绑定原理及实现
这里写自定义目录标题思路分析实现过程 1.实现一个Observer 2.实现Watcher 此文章是学习以为大神____chen的 <vue的双向绑定原理及实现> vue数据双向绑定是 ...
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
Scrapy Learning笔记（四）- Scrapy双向爬取
摘要:介绍了使用Scrapy进行双向爬取(对付分类信息网站)的方法. 所谓的双向爬取是指以下这种情况,我要对某个生活分类信息的网站进行数据爬取,譬如要爬取租房信息栏目,我在该栏目的索引页看到如下页面, ...

vue range 双向滚动取中间值

背景

思路讲解

- 最后取得的min/max，有可能是小数，那么，我们应该还要支持用户自定义保留几位小数【pointLen】

核心代码展示

待优化

参考

vue range 双向滚动取中间值相关推荐

最新文章

热门文章

vue range 双向滚动 取中间值

背景

思路讲解

- 最后取得的min/max，有可能是小数，那么，我们应该还要支持用户自定义保留几位小数【pointLen】

核心代码展示

待优化

参考

vue range 双向滚动 取中间值相关推荐

最新文章

热门文章

vue range 双向滚动取中间值

vue range 双向滚动取中间值相关推荐