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


Posted in Javascript onOctober 19, 2019

最近在通过《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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
Vue.js组件通信之自定义事件详解
Oct 19 #Javascript
Vue.js自定义指令学习使用详解
Oct 19 #Javascript
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
利用static实现表格的颜色隔行显示
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
浅析Python装饰器以及装饰器模式
2018/05/28 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
智能钱包:Ekster
2019/11/21 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
市场营销方案范文
2014/03/11 职场文书
森林防火标语
2014/06/23 职场文书
统计专业自荐书
2014/07/06 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2015年新学期寄语
2015/02/26 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python