Element InputNumber 计数器的实现示例


Posted in Javascript onAugust 03, 2020

前言

这篇我们继续研究InputNumber。

基本实现

基本的准备工作过后,开始基本实现。

上测试代码:

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字">
</el-input-number>

上组件代码:

<template>
 <div
 :class="[
  'el-input-number',
 ]"
 >
 <span 
  class="el-input-number__decrease"
  role="button"
  :class="{'is-disabled': minDisabled}"
  @click="decrease"
 >
  <i class="el-icon-minus"></i>
 </span>
 <span
  class="el-input-number__increase"
  role="button"
  :class="{'is-disabled': maxDisabled}"
  @click="increase"
 >
  <i class="el-icon-plus"></i>
 </span>
 <el-input
  ref="input"
  :value="value"
  @input="value => $emit('input', value)"
 >
 </el-input>
 </div>
</template>

<script>
import ElInput from '../Input/index'

export default {
 name: 'ElInputNumber',
 props: {
 value: {},
 max: {
  type: Number,
  default: Infinity
 },
 min: {
  type: Number,
  default: -Infinity
 },
 },
 computed: {
 minDisabled() {
  return this.value - 1 < this.min;
 },
 maxDisabled() {
  return this.value + 1 > this.max;
 },
 },
 methods: {
 decrease() {
  if(this.minDisabled) return

  this.$emit('input', this.value - 1)
 },
 increase() {
  if(this.maxDisabled) return

  this.$emit('input', this.value + 1)
 }
 },
 components: {
 ElInput
 }
}
</script>

上效果:

Element InputNumber 计数器的实现示例

这次可以复用Input组件,两边加新增/减少两个按钮,实现加减逻辑。再控制最大值最小值的时候,禁用按钮,基本实现完成。

点击按钮持续增加/减少

现在添加:点击加减按钮的时候,不抬起鼠标,值就会持续增加/减少的特性。

要实现此功能,源码中用到了directive自定义指令,靠节流mousedown事件来实现持续点击效果。

写自定义命令:

import { once, on } from '../utils/dom';

export default {
 bind(el, binding, vnode) {
 let interval = null;
 let startTime;
 // binding.expression 就是decrease/increase 事件名称
 // handler就是对应的相应函数
 const handler = () => vnode.context[binding.expression].apply();
 const clear = () => {
  if (Date.now() - startTime < 100) {
  handler();
  }
  clearInterval(interval);
  interval = null;
 };

 on(el, 'mousedown', (e) => {
  if (e.button !== 0) return;
  startTime = Date.now();
  once(document, 'mouseup', clear);
  clearInterval(interval);
  // 实现节流
  interval = setInterval(handler, 100);
 });
 }
};

在组件中使用自定义命令:

import RepeatClick from '../../directives/repeat-click';

directives: {
 repeatClick: RepeatClick
},

<span 
 class="el-input-number__decrease"
 role="button"
 :class="{'is-disabled': minDisabled}"
 v-repeat-click="decrease"
>
 <i class="el-icon-minus"></i>
</span>
<span
 class="el-input-number__increase"
 role="button"
 :class="{'is-disabled': maxDisabled}"
 v-repeat-click="increase"
>
 <i class="el-icon-plus"></i>
</span>

禁用状态

  • 添加 { 'is-disabled': disabled } 到根节点样式上。
  • 添加:disabled="disabled"到el-input节点上。
  • 添加if(this.disabled) return 到decrease/increase方法上。

完成效果:

Element InputNumber 计数器的实现示例

步数

上测试代码:

<el-input-number v-model="num" :step="2"></el-input-number>

给组件添加step属性。在组件中把+/-1这样到代码替换为+/- this.step。

严格步数

step-strictly属性接受一个Boolean。如果这个属性被设置为true,则只能输入步数的倍数。

上测试代码:

<el-input-number v-model="num" :step="2" step-strictly></el-input-number>

要想实现严格步数,我们直接输入的值,会检查是不是step的倍数,如果不是,则换成step的倍数。这就不能直接把InputNumber的value直接绑定在内部的el-input上了。先在el-input的input事件记录输入的值。再在change事件中将值赋予给value,最后在watch.value上校验输入的值,并转换成step的倍数。

data() {
 return {
 currentValue: 0, // 缓存上次输入的值
 userInput: null, // 缓存当前输入的值
 };
},

<el-input
 ref="input"
 :disabled="disabled"
 :value="currentValue" // 变为绑定currentValue
 @input="handleInput"
 @change="handleInputChange"
>
</el-input>

// 先在el-input的input事件记录输入的值
handleInput(value) {
 this.userInput = value;
},
// 在change事件中将值赋予给value
handleInputChange(value) {
 let newVal = value === '' ? undefined : Number(value);
 
 if (!isNaN(newVal) || value === '') {
  this.setCurrentValue(newVal);
 }
 this.userInput = null;
},
setCurrentValue(newVal) {
 const oldVal = this.currentValue;

 if (newVal >= this.max) newVal = this.max;
 if (newVal <= this.min) newVal = this.min;
 if (oldVal === newVal) return;
 this.userInput = null;
 this.$emit('input', newVal);
 this.$emit('change', newVal, oldVal);
 this.currentValue = newVal;
},

watch: {
 // 在watch.value上校验输入的值,并转换成step的倍数
 value: {
 immediate: true,
 handler(value) {
  let newVal = value === undefined ? value : Number(value);
  
  // 设置严格步数的逻辑
  if (this.stepStrictly) {
   newVal = Math.round(newVal / this.step) * this.step
  }

  if (newVal >= this.max) newVal = this.max;
  if (newVal <= this.min) newVal = this.min;

  this.currentValue = newVal;
  this.userInput = null;
  this.$emit('input', newVal);
 }
 }
},

精度

上测试代码:

<el-input-number v-model="numPrecision" :precision="2" :step="0.1" :max="10"></el-input-number>

这里step变成小数了,那在累加得过程中,就会有0.1+0.2这样得精度问题出现了。element的解决思路是将值扩大精度倍进行计算,得到结果后再除以精度倍数。

increase() {
 if(this.maxDisabled || this.disabled) return
 const value = this.value || 0;
 const newVal = this._increase(value, this.step);

 this.setCurrentValue(newVal);
},
_increase(val, step) {
 if (typeof val !== 'number' && val !== undefined) return this.currentValue;
 // step是0.1,precisionFactor是10。
 const precisionFactor = Math.pow(10, this.numPrecision);

 return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
},

// 确保计算得结果0.10000000001这种误差情况会被消除
 toPrecision(num, precision) {
 if (precision === undefined) precision = this.numPrecision;
 return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision));
},

在展示的时候,利用toFixed函数展示精度即可。

效果如下:

Element InputNumber 计数器的实现示例

尺寸

添加size属性,在根元素得样式添加size ? 'el-input-number--' + size : ''。

效果如下:

Element InputNumber 计数器的实现示例

按钮位置

设置 controls-position 属性可以控制按钮位置。

上测试代码:

<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10">
</el-input-number>

通过controls-position='right',在组件内控制样式即可。

效果如下:

Element InputNumber 计数器的实现示例

总结

严格步数和精度这两个特性得逻辑稍有些复杂,需要多研究一会。

源码在码云: https://gitee.com/DaBuChen/my-element-ui/tree/input-number

到此这篇关于Element InputNumber 计数器的实现示例的文章就介绍到这了,更多相关Element InputNumber 计数器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
python链表类中获取元素实例方法
2021/02/23 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
2014年仓库保管员工作总结
2014/12/03 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
部分武汉产收音机展览
2022/04/07 无线电
Python如何让字典保持有序排列
2022/04/29 Python