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

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

源代码:数字输入框组件

<强>项目整体结构

　　

├──src 项目代码
　　│├──常见的公共js库
　　││├──数。js判断是否为数字
　　│├──组件组件
　　││├──inputCount。vue数字输入框组件
　　││├──inputNumber。vue数字输入框调用页
　　|├──路由器路由
　　| |├──指数。js路由相关操作
　　|├──App.vue入口页
　　|├──主要。js ! Webpack配置约定的js入口,不要修改名称和路径

　　 　　

main.js 　　

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

　　 　　 　　从“Vue”进口Vue 　　导入应用程序从“/App。” 　　从“进口路由器。/路由器的 　　 　　Vue.config。productionTip=false/* eslint-disable没有新*/新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　组件:{应用}, 　　模板:“& lt; App/祝辞;” 　　}) 　　 　　

App.vue 　　

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

　　 　　 　　& lt; template> 　　& lt; div id=坝τ谩北? 　　& lt; router-view/比; 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　名称:“应用程序” 　　} 　　& lt;/script> 　　 　　

路由器/index.js 　　 　　//导入引入路由组件 　　从“Vue”进口Vue 　　从“vue-router”进口路由器 　　从“@/组件/导入inputNumber inputNumber” 　　Vue.use(路由器)//然后定义路由(路线),并创建路由实例 　　出口默认新路由器({ 　　路线:[ 　　{ 　　路径:“/? 　　名称:“指数”, 　　组件:inputNumber 　　} 　　] 　　}) 　　 　　

常见/number.js 　　 　　//判断输入的值是否为数字 　　函数isValueNumber(价值){ 　　var reg=/^[0 - 9] + # 63;公司[0 - 9]*/美元 　　如果(reg.test(值)){ 　　还真 　　} 　　返回假 　　}//切记将此函数暴露,否则无法调用 　　{出口 　　isValueNumber 　　} 　　 　　

组件/inputNumber.vue 　　 　　 　　& lt; template> 　　& lt; div>//双向绑定值,并设默认值为5,最大值为100年最小值为0 　　& lt;输入计数v模型=凹壑怠?max=" 100 ": min=" 0 "祝辞& lt;/input-count> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script>//引入子组件 　　从“. ./组件/导入inputCount inputCount” 　　出口默认{ 　　数据(){ 　　返回{ 　　值:5//设置初始值为5 　　} 　　}， 　　 　　组件:{ 　　inputCount 　　} 　　} 　　& lt;/script> 　　 　　

组件/inputCount.vue 　　 　　 　　& lt; template> 　　祝辞& lt; div class="输入数”; 　　& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/currentValue " @change=@keyup“handleChange”。=癶andleDown @keyup.up”=癶andleUp”/比; 　　& lt;按钮@click=癶andleDown”:禁用=癱urrentValue & lt;=min”祝辞& lt;/button> 　　& lt;按钮@click=癶andleUp”:禁用=癱urrentValue祝辞=max "祝辞+ & lt;/button> 　　& lt;/div> 　　& lt;/template> 　　 　　

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

　　

@keyup.down=癶andleDown和@keyup.up”=癶andleUp”实现在输入框聚焦时,对键盘上下按键的支持。

　　 　　 　　& lt; script>//引入判断函数 　　进口{isValueNumber}“. ./共同/数量” 　　出口默认{ 　　数据(){ 　　返回{//步骤:10日控制步伐 　　currentValue:这个。价值//初始化引用父组件价值 　　} 　　}， 　　道具:{ 　　马克斯:{ 　　类型:数字, 　　默认值:无穷 　　}， 　　分钟:{ 　　类型:数字, 　　默认值:无穷 　　}， 　　价值:{ 　　类型:数字, 　　默认值:0 　　} 　　}，//监听选项用来监听某个道具或数据的改变,当它们发生变化时,就会触发手表配置的函数 　　看:{ 　　currentValue:函数(val) {//使用v模型时改变值 　　这一点。发出(“输入”,val)美元//触发自定义事件变化事件,用于告知父组件数字输入框的值有所改变 　　这一点。发出(“变化”,val)美元 　　}， 　　价值:函数(val) { 　　this.updateValue (val) 　　} 　　}， 　　方法:{ 　　handleDown:函数(){ 　　如果这一点。currentValue & lt;=this.min)回来 　　这一点。currentValue -=this.step 　　}， 　　handleUp:函数(){ 　　如果这一点。currentValue祝辞=this.max)回来 　　这一点。currentValue +=this.step 　　}，//过滤出一个正确的currentValue 　　updateValue:函数(val) { 　　如果(val比;this.max) val=this.max 　　如果(val & lt;this.min) val=this.min 　　这一点。currentValue=https://www.yisu.com/zixun/val 　　}，//判断输入的值是否为数字 　　handleChange:函数(事件){//e.target.value:指向事件执行时鼠标所点击区域的那个元素的值//调整():删除字符串开始和末尾的空格 　　var val=event.target.value.trim () 　　var max=this.max 　　var min=this.min 　　如果(isValueNumber (val)) { 　　val=号(val) 　　这一点。currentValue=瓦尔 　　如果(val> max) { 　　这一点。currentValue=max 　　}else if (val

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