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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
微信小程序实现禁止分享代码实例
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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP脚本的10个技巧(7)
2006/10/09 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
python概率计算器实例分析
2015/03/25 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python 常用string函数详解
2016/05/30 Python
python按照多个条件排序的方法
2019/02/08 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python实现超市商品销售管理系统
2019/11/22 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
初中化学教学反思
2014/01/23 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书