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数字输入框组件使用方法详解 的全部内容, 来源链接: utcz.com/p/237000.html

回到顶部