Vue数字输入框组件使用方法详解


Posted in Javascript onFebruary 10, 2020

前面的话

关于基础组件介绍,已经更新完了。这篇文章将用组件基础知识开发一个数字输入框组件。将涉及到指令、事件、组件间通信。

Vue数字输入框组件使用方法详解

基础需求

  • 只能输入数字
  • 设置初始值,最大值,最小值
  • 在输入框聚焦时,增加对键盘上下键的支持
  • 增加一个控制步伐prop-step,例如,设置为10 ,点击加号按钮,一次增加10

项目搭建

在了解需求后,进行项目的初始化:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 <input-number></input-number>
 </div>
</body>
</html>
<script>
 Vue.component('input-number',{
 template: `
  <div class="input-number">
  <input type="text" />
  <button>-</button>
  <button>+</button>
  </div>
 `}
 var app = new Vue({
 el:'#app'
 })
</script>

初始化结构搭好后,由于要设置初始值,最大值、最小值,我们在父组件中的 < input-number>< /input-number>上设置这些值,并且通过Props将父组件数据传递给子组件

父组件中添加数据:value是一个关键的绑定值,所以用v-model,实现双向绑定。

<input-number v-model="value" :max="100" :min="0"></input-number>

在子组件中添加props选项:

props: {
  max: {
  type: Number,
  default: Infinity
  },
  min: {
  type: Number,
  default: -Infinity
  },
  value: {
  type: Number,
  default: 0
  }
 },

我们知道,Vue组件时单项数据流,所以无法在子组件上更改父组件传递的数据,在这里子组件只改变value值,所以我们给子组件设置一个data数据,默认引用value值,然后在组件内部维护这个data。

data() {
  return{
  // 保存初次父组件传递的数据
  currentValue : this.value,
  }
 }

并且给子组件的input元素绑定value

<input type="text" :value="currentValue" />

这样只解决了初始化时引用父组件value的问题,但是如果父组件修改了value,子组件无法感知,我们想要currentValue一起更新。那么就要使用wacth监听选项监听value。

  • 当父组件value发生变化时,子组件currentValue也跟着变化。
  • 当子组件currentValue变化时,使用$emit触发v-model,使得父组件value也跟着变化
watch: {
  // 监听属性currentValue与value
  currentValue(val) {
  // currentValue变化时,通知父组件的value也变化
  this.$emit('input', val);
  

  },
  value(val) {
  // 父组件value改变时,子组件currentValue也改变
  this.updataValue(val);
  }
 },
 methods: {
  updataValue(val) {
  if(val > this.max) val = this.max;
  if(val < this.min) val = this.min;
  this.currentValue = val;
  }
  },
  // 第一次初始化时,也对value进行过滤
 mounted: function() {
  this.updataValue(this.value);
 }

上述代码中,生命周期mounted钩子也使用了updateValue()方法,是因为初始化时也要对value进行验证。

父子间的通信解决差不多了,接下来完成按钮的操作:添加handleDown与handleUp方法

template: `
  <div class="input-number">
  <input type="text" :value="currentValue" />
  <button @click="handleDown" :disabled="currentValue <= min">-</button>
  <button @click="handleUp" :disabled="currentValue >= max">+</button>
  </div>
 `,
  methods: {
  updataValue(val) {
  if(val > this.max) val = this.max;
  if(val < this.min) val = this.min;
  this.currentValue = val;
  },
  // 点击减号 减10
  handleDown() {
  if(this.currentValue < this.min) return 
  this.currentValue -= this.prop_step;
  },
  // 点击加号 加10 
  handleUp() {
  if(this.currentValue < this.min) return
  this.currentValue += this.prop_step;
  },

当用户在输入框想输入具体的值时,怎么办?

为input绑定原生change事件,并且判断输入的是否数字:

<input type="text" :value="currentValue" @change="handleChange" />

在methods选项中,添加handleChange方法:

// 输入框输入值
 handleChange(event) {
 var val = event.target.value.trim();
 var max = this.max;
 var min = this.min;
  if(isValueNumber(val)) {
   val = Number(val);
   if(val > max) {
   this.currentValue = max;
   }
   if(val < min) {
   this.currentValue = min;
   }
   this.currentValue = val;
   console.log(this.value);
  }else {
   event.target.value = this.currentValue;
  }

在外层添加判断是否为数字的方法isValueNumber:

function isValueNumber(value) {
 return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
 }

到此一个数字输入框组件基本完成,但是前面提出的后两个要求也需要实现,很简单,在input上绑定一个keydown事件,在data选项中添加数据prop_step

<input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
data() {
  return{
  // 保存初次父组件传递的数据
  currentValue : this.value,
  prop_step: 10
  }
 }
// 当聚焦时,按上下键改变
  handleChange2(event) {
  console.log(event.keyCode)
  if(event.keyCode == '38') {
   this.currentValue ++;
  }
  if(event.keyCode == '40') {
   this.currentValue --;
  }
  }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <input-number v-model="value" :max="100" :min="0"></input-number>
 </div>
</body>
</html>
<script>
 function isValueNumber(value) {
  return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
 }
 Vue.component('input-number',{
  props: {
   max: {
    type: Number,
    default: Infinity
   },
   min: {
    type: Number,
    default: -Infinity
   },
   value: {
    type: Number,
    default: 0
   }
  },
  template: `
   <div class="input-number">
    <input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
    <button @click="handleDown" :disabled="currentValue <= min">-</button>
    <button @click="handleUp" :disabled="currentValue >= max">+</button>
   </div>
  `,
  data() {
   return{
    // 保存初次父组件传递的数据
    currentValue : this.value,
    prop_step: 10
   }
  },
  watch: {
   // 监听属性currentValue与value
   currentValue(val) {
   // currentValue变化时,通知父组件的value也变化
   this.$emit('input', val);
   

   },
   value(val) {
   // 父组件value改变时,子组件currentValue也改变
    this.updataValue(val);
   }
  },
  methods: {
   updataValue(val) {
    if(val > this.max) val = this.max;
    if(val < this.min) val = this.min;
    this.currentValue = val;
   },
   // 点击减号 减10
   handleDown() {
    if(this.currentValue < this.min) return 
    this.currentValue -= this.prop_step;
   },
   // 点击加号 加10 
   handleUp() {
    if(this.currentValue < this.min) return
    this.currentValue += this.prop_step;
   },
   // 输入框输入值
   handleChange(event) {
    var val = event.target.value.trim();
    var max = this.max;
    var min = this.min;
    if(isValueNumber(val)) {
     val = Number(val);
     if(val > max) {
      this.currentValue = max;
     }
     if(val < min) {
      this.currentValue = min;
     }
     this.currentValue = val;
     console.log(this.value);
    }else {
     event.target.value = this.currentValue;
    }
   },
   // 当聚焦时,按上下键改变
   handleChange2(event) {
    console.log(event.keyCode)
    if(event.keyCode == '38') {
     this.currentValue ++;
    }
    if(event.keyCode == '40') {
     this.currentValue --;
    }
   }

  },
  // 第一次初始化时,也对value进行过滤
  mounted: function() {
   
   this.updataValue(this.value);
  }


 })
 var app = new Vue({
  el:'#app',
  data:{
   value: 5
  }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
js实现登录拖拽窗口
Feb 10 #Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 #Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 #Javascript
You might like
php 错误处理经验分享
2011/10/11 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js中replace的用法总结
2013/12/27 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python走楼梯问题解决方法示例
2018/07/25 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python实现剪切功能
2019/01/23 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python定义函数实现累计求和操作
2020/05/03 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
个人作风建设自查报告
2014/10/22 职场文书
入党培养人考察意见
2015/06/08 职场文书
小学安全教育主题班会
2015/08/12 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android