编程 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 相关文章推荐

utf8的编码算法转载

Dec 27 Javascript

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

Nov 18 Javascript

js+jquery常用知识点汇总

Mar 03 Javascript

JS实现点击按钮后框架内载入不同网页的方法

May 05 Javascript

jquery获取当前元素索引值用法实例

Jun 10 Javascript

浅谈js常用内置方法和对象

Sep 24 Javascript

vue 项目如何引入微信sdk接口的方法

Dec 18 Javascript

laravel5.3 vue 实现收藏夹功能实例详解

Jan 21 Javascript

浅谈React 服务器端渲染的使用

May 08 Javascript

30分钟快速实现小程序语音识别功能

Nov 27 Javascript

JS实现网页时钟特效

Mar 25 Javascript

vue实现分页的三种效果

Jun 23 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