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

2023-08-10 17:52:04 169

最近在通过《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实例并使用需要的插件

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'

Vue.config.productionTip=false

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
components:{App},
template:''
})

App.vue

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

router/index.js

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

common/number.js

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

components/inputNumber.vue

components/inputCount.vue

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

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

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

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

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

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

热门推荐

随机推荐