vue.js版双向滑动区间选择器

  • K5_975668
    了解作者
  • 3.6KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-01 19:00
    上传日期
1.优化移动端输入范围时的各种奇怪的兼容性问题,提升用户体验 2.资源包注释详细,逻辑简单 3.有助于掌握方法论,受益良久 4.使用简单,参数简单 5.交互符合移动端操作习惯
RangeModel.rar
  • RangeModel.vue
    13.5KB
内容介绍
<template> <div class="range"> <div class="scope-value"> <div class="title"> <span>价格</span> <span class="unit">(元)</span> </div> <div class="value"> {{value}}万 </div> </div> <div class="scope-bar" :ref="refId"> <div class="sb-active"> <div class="value" ref="active_value">{{activeVal}}</div> </div> <div class="sb-scale"> <div class="sbs-item" :style="{left: item.left}" v-for="(item,i) in prices" :key="i">{{i == prices.length - 1 ? '不限' : item.value}}</div> </div> <div class="sb-line"> <div class="sbl-item" :style="{left: item.left}" v-for="(item,i) in prices" :key="i">|</div> </div> <div class="sb-bar"> <div class="active-bar" ref="active_bar"></div> <div class="active-block left" ref="left" id="left" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></div> <div class="active-block right" ref="right" id="right" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></div> <div class="clickable-bar" ref="pro_bar" @click.stop.prevent="progressBarclick"></div> </div> </div> </div> </template> <script> export default { props: { // 步长,即一间隔需要走多少步,计算公式为:单间隔/滑块数走完单间隔数,例: 3(单间隔)/3 = 1, 这个表示在单间隔内有3个停顿 step: { type: Number, default: 1 }, // 是否将滑动捕捉到步长值 snap: { type: Boolean, default: true }, // 范围数组 scale: { type: Array, default () { return [0,3,6,9,12,15] } }, // 范围默认值 defValue: { type: String, default: '1~6' }, // 默认值分割符 symbol: { type: String, default: '~' }, // 范围组件ref refId: { type: String, default: 'bar' } }, data () { return { prices: [], startX: null, startY: null, initLeft: 0, curPointLeft: 0, activeClickBlock: 'left', activeClickLock: true, activeVal: '', value: '', } }, computed: { // 进度条的宽度 barWidth () { return this.$refs[this.refId].offsetWidth }, // 每一步长宽度或者第一个步长 everyStepWidth () { return this.barWidth / ((this.scale[this.scale.length - 1] - this.scale[0]) / this.step) }, // 进度条中心点的left值 halfBarLeft () { return Math.floor(this.barWidth / 2) }, // 最后一个步长宽度 lastStepWidth () { return this.barWidth - this.everyStepWidth }, // 平均间隔百分比 secondPerc () { return Math.round(100 / (this.scale.length - 1)) / 100 } }, methods: { // 【渲染图例以及刻度】 renderScaleLegend () { this.value = this.defValue var scale = this.scale, // 100% 均分定位 prc = Math.round((100 / (scale.length - 1)) * 10) / 10 for(var i = 0; i < scale.length; i++) { var scaleObj = {} scaleObj.left = i * prc + '%' scaleObj.value = scale[i] this.prices.push(scaleObj) } this.setValue() }, touchstart (event) { event.preventDefault() event.stopPropagation() this.startX = event.changedTouches[0].pageX this.initLeft = event.target.offsetLeft }, touchmove (event) { event.preventDefault() event.stopPropagation() var id = event.target.id var moveEndX = event.changedTouches[0].pageX var X = moveEndX - this.startX var position = X + this.initLeft var e_dis = this.$refs[this.refId].offsetWidth / ((this.scale[this.scale.length - 1] - this.scale[0]) / this.step) if (id == 'left') { if (position >= (this.$refs.right.offsetLeft - e_dis)) { position = this.$refs.right.offsetLeft - e_dis } } else { if (position <= (this.$refs.left.offsetLeft + e_dis)) { position = this.$refs.left.offsetLeft + e_dis } } this.setPosition({ id: id, position: position, isPx: true, type: 'touch' }) }, touchend (event) { event.preventDefault() event.stopPropagation() this.$refs.active_value.style.left = '-200%' }, // 【点击进度条时控制左右滑块的位置】 progressBarclick (e) { // 当前点击处左值 this.curPointLeft = e.offsetX var init_left = this.$refs.left.offsetLeft, pos, init_right = this.$refs.right.offsetLeft if (this.curPointLeft >= init_right) { this.activeClickBlock = 'right' } else { if (this.curPointLeft >= this.halfBarLeft) { this.activeClickBlock = 'right' } else { this.activeClickBlock = 'left' } } // 定位极限值,一分格宽度 var sw = this.secondPerc * this.barWidth pos = this.curPointLeft if (this.activeClickBlock == 'left') { if (pos >= init_right - sw) { this.activeClickBlock = 'left' pos = init_right - sw } } else { if (pos <= init_left + sw) { this.activeClickBlock = 'right' pos = init_left + sw } } this.setPosition({ id: this.activeClickBlock, position: pos, isPx: true, type: 'click' }) }, // 【默认显示】 setValue () { var values = this.value.toString().split('~') values[0] = Math.min(Math.max(values[0], this.scale[0]), this.scale[this.scale.length - 1]) + '' if (values.length > 1) { values[1] = Math.min(Math.max(values[1], this.scale[0]), this.scale[this.scale.length - 1]) + '' } // 得到两个刻度值所占的百分比 var perc = this.setValueToPerc(values) // 传入百分比来定位,即isPx为false this.setPosition({ id: 'left', position: perc[0], type: 'init' }) // 左标 this.setPosition({ id: 'right', position: perc[1], type: 'init' }) // 右标 }, // 【计算刻度值占进度条宽度的百分数】 setValueToPerc (values) { var p1 = ((parseFloat(values[0]) - parseFloat(this.scale[0])) * 100 / (this.scale[this.scale.length - 1] - this.scale[0])) var p2 = ((parseFloat(values[1]) - parseFloat(this.scale[0])) * 100 / (this.scale[this.scale.length - 1] - this.scale[0])) return
评论
    相关推荐
    • eagle.js, 使用 Vue.js 构建的破坏性幻灯片框架.zip
      eagle.js, 使用 Vue.js 构建的破坏性幻灯片框架 Eagle.js---黑客的幻灯片框架幻灯片系统构建在 Vue.js 平台之上。支持动画,主题,交互式小部件( 用于网络演示)易于跨演示文稿重用组件,幻灯片和样式内置演示器模式...
    • vue-apexcharts:Ap ApexCharts的Vue.js组件
      用于Vue.js包装器可在vue中构建交互式可视化。 下载及安装 通过npm安装 npm install --save apexcharts npm install --save vue-apexcharts 用法 import VueApexCharts from 'vue-apexcharts' Vue . use ( ...
    • 故事书基础::books:带Vue.js课程的故事书的源代码
      使用Storybook,我们可以创建可视化的组件库和游乐场,在隔离的环境中可以在其中记录,展示和与Vue.js组件进行交互。 在此Storybook课程中,您将学习如何使用Vue CLI在任何Vue.js项目中安装和配置Storybook。 您还...
    • Vue.js 教程
      Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简 单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模 型。实际...
    • v-model-V-Model是Vue.js的模型插件,例如ng-resource。-Vue.js开发
      V模型提供交互支持V模型V模型是Vue.js的模型插件,例如ng-resource。 基于axios,正则表达式路径和bluebird。 V模型提供了与RESTful服务的交互支持,可以与Vue.js 1.x和2.x一起使用。 查看有关ng-resource安装的更多...
    • google-vue:将Google与Vue.js交互
      谷歌 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 运行端到端测试 npm run test:e2e ... :performing_arts: Comvocêpode conversar ...
    • Vue.js实践:使用Vue2.0开发富交互WEB应用
      Vue.js实践:使用Vue2.0开发富交互WEB应用
    • vue3-touch-events:对vue.js 3的简单触摸事件支持
      使交互vue.js内容易于移动的最简单方法。 将v-touch事件添加到元素时,它会使用完全声明性的语法在台式机和移动设备上运行。 与其他库不同,您无需在组件中添加任何特殊代码即可完成此工作。 您只需要全局注册库...
    • vue-apexcharts ApexChartsvue-apexcharts-ApexCharts的Vue.js组件。-Vue
      用于ApexCharts的Vue.js包装器可在vue中构建交互式可视化。 下载和安装通过npm安装npm install --save apexcharts n用于ApexCharts的Vue.js包装器在vue中构建交互式可视化。 下载和安装通过npm安装npm install --...
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档