首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

crazy的蓝色梦想

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript倒计时功能实现代码
Jun 07 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
js中typeof的用法汇总
Dec 12 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
vuex的module模块用法示例
Nov 12 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
党团范文(807) 协议书(568) 报告(147) 公证书(45) 任命书(51) 口号(179) 标语(336) 检举信(8) 委托书(259) 说明书(38)
You might like
输出控制类
2006/10/09 PHP
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php表单处理操作
2017/11/16 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Vue.js第三天学习笔记（计算属性computed）
2016/12/01 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
vue-cli 引入jQuery，Bootstrap，popper的方法
2018/09/03 jQuery
Angular Material Icon使用详解
2018/11/07 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python处理session的方法整理
2019/08/29 Python
Python中无限循环需要什么条件
2020/05/27 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
生物技术毕业生自荐信
2013/10/23 职场文书
妇科医生自荐信
2013/11/05 职场文书
消防先进事迹材料
2014/02/10 职场文书
家长会欢迎词
2015/01/23 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
分享提高 Python 代码的可读性的技巧
2022/03/03 Python