element数字输入框说明文字_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.vue

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

export default {

name: 'App'

}

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

// 双向绑定value，并设默认值为5，最大值为100，最小值为0

//引入子组件

import inputCount from '../components/inputCount'

export default {

data () {

return {

value: 5 //设置初始值为5

}

},

components: {

inputCount

}

}

components/inputCount.vue

-

+

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

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

// 引入判断函数

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)

}

}

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

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

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