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初学困境—js初学
Dec 29 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JsRender for object语法简介
Oct 31 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
vue中的scope使用详解
Oct 29 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
元素全屏的设置与监听实例
2017/11/28 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python复制文件代码实现
2013/12/23 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
python实现画图工具
2020/08/27 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
财务会计大学生自我评价
2014/04/09 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
学校创先争优活动总结
2014/08/28 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android