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

最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些

最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些非常基础性的知识点还不是很了解，因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。

源代码：数字输入框组件

项目整体结构

├── src  项目代码 │ ├── common 公共js库 │ │ ├── number.js 判断是否为数字 │ ├── components 组件 │ │ ├── inputCount.vue 数字输入框组件 │ │ ├── inputNumber.vue 数字输入框调用页 | ├── router 路由 | | ├── index.js 路由相关操作 | ├── App.vue 入口页 | ├── main.js !Webpack配置约定的js入口，不要修改名称和路径

main.js

入口文件，主要作用是初始化vue实例并使用需要的插件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

App.vue

主组件，所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件

<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

router/index.js

// import引入路由组件
import Vue from 'vue'
import Router from 'vue-router'
import inputNumber from '@/components/inputNumber'
Vue.use(Router)
// 然后定义路由(routes)，并创建路由实例
export default new Router({
 routes: [
 {
 path: '/',
 name: 'index',
 component: inputNumber
 }
 ]
})

common/number.js

// 判断输入的值是否为数字
function isValueNumber (value) {
 var reg = /^[0-9]+.?[0-9]*$/
 if (reg.test(value)) {
 return true
 }
 return false
}
// 切记将此函数暴露，否则无法调用
export {
 isValueNumber
}

components/inputNumber.vue

<template>
 <div>
 // 双向绑定value，并设默认值为5，最大值为100，最小值为0
 <input-count v-model="value" :max="100" :min="0"></input-count>
 </div>
</template>

<script>
//引入子组件
import inputCount from '../components/inputCount'
export default {
 data () {
 return {
 value: 5 //设置初始值为5
 }
 },

 components: {
 inputCount
 }
}
</script>

components/inputCount.vue

<template>
 <div class="input-number">
 <input type="text" :value="currentValue" @change="handleChange" @keyup.down="handleDown" @keyup.up="handleUp"/>
 <button @click="handleDown" :disabled="currentValue <= min" >-</button>
 <button @click="handleUp" :disabled="currentValue >= max">+</button>
 </div>
</template>

input绑定了currentValue和原生的change事件，在句柄handleChagne函数中，因为绑定的currentValue是单向数据流，所以在输入时，currentValue的值并没有实时进行改变。如果输入的不是数字，就将输入的内容重置为之前的currentValue；如果输入的值是数字，就把输入的值赋给currentValue。

@keyup.down="handleDown"和@keyup.up="handleUp"实现在输入框聚焦时，对键盘上下按键的支持。

<script>
// 引入判断函数
import { isValueNumber } from '../common/number'
export default {
 data () {
 return {
 step: 10, // 控制步伐
 currentValue: this.value //初始化引用父组件value
 }
 },
 props: {
 max: {
 type: Number,
 default: Infinity
 },
 min: {
 type: Number,
 default: -Infinity
 },
 value: {
 type: Number,
 default: 0
 }
 },
 // 监听选项用来监听某个prop或data的改变，当它们发生变化时，就会触发watch配置的函数
 watch: {
 currentValue: function (val) {
 // 使用v-model时改变value
 this.$emit('input', val)
 // 触发自定义事件on-change事件，用于告知父组件数字输入框的值有所改变
 this.$emit('on-change', val)
 },
 value: function (val) {
 this.updateValue(val)
 }
 },
 methods: {
 handleDown: function () {
 if (this.currentValue <= this.min) return
 this.currentValue -= this.step
 },
 handleUp: function () {
 if (this.currentValue >= this.max) return
 this.currentValue += this.step
 },
 // 过滤出一个正确的currentValue
 updateValue: function (val) {
 if (val > this.max) val = this.max
 if (val < this.min) val = this.min
 this.currentValue = val
 },
 // 判断输入的值是否为数字
 handleChange: function (event) {
 // e.target.value:指向事件执行时鼠标所点击区域的那个元素的值
 // trim():删除字符串开始和末尾的空格
 var val = event.target.value.trim()
 var max = this.max
 var min = this.min
 if (isValueNumber(val)) {
 val = Number(val)
 this.currentValue = val
 if (val > max) {
 this.currentValue = max
 } else if (val < min) {
 this.currentValue = min
 }
 } else {
 event.target.value = this.currentValue
 }
 }
 },
 // 第一次初始化需对value进行过滤
 mounted: function () {
 this.updateValue(this.value)
 }
}
</script>

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

vue数字输入框组件 vue数字输入框 vue输入框组件