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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
js中跨域方法原理详解
Jul 19 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
微信小程序登录换取token的教程
May 31 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 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
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python set集合使用方法解析
2019/11/05 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
教师求职信范文分享
2013/12/27 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
副总经理岗位职责
2014/03/16 职场文书
考博专家推荐信
2014/05/10 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技