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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue实现计算器功能
2020/02/22 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python实现内存监控系统
2021/03/07 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python开发入门——列表生成式
2020/09/03 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
地理科学专业自荐信
2014/09/01 职场文书
道歉信范文
2015/05/12 职场文书
如何写好活动总结
2019/06/21 职场文书