Vue数字输入框组件示例代码详解


Posted in Javascript onJanuary 15, 2020

数字输入框组件

实现功能:只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。

为了方便,这里选用Vue的 cli-service

Vue数字输入框组件示例代码详解

实现快速原型开发

首先template部分代码

<template>
 <div class="demo">
  <input-number v-model="value" :max="10" :min="0"></input-number>
 </div>
</template>

这部分没有什么特别说明的,分别传入 value、max、min 作为子组件的原始值最大值和最小值。在子组件中用 props 接收,独立组件,对每个传入的prop进行类型验证

主要JS部分代码

<script>
import Vue from 'vue'
Vue.component('input-number',{
 props: {
  value: {
   type: Number,
   default: 0
  },
  max: {
   type: Number,
   default: Infinity
  },
  min: {
   type: Number,
   default: -Infinity
  }
 },
 data() {
  return {
   currentValue: this.value
  }
 },
 render(cr) {
  let _this = this
  ...
 }
})
export default {
 data() {
  return {
   value: 5
  }
 }
}
</script>

在这里不能使用字符串的方式定义组件模板,所以使用 render() 函数的方式

render(cr) {
 let _this = this
 return cr('div',{'class': 'input-number'},[
  cr('button',{'class': {'down-btn':true,'dis':this.currentValue<=this.min},on: {click: _this.handleDown},},['-']),
  cr('input',{'class': 'change-input',domProps: {value: _this.currentValue}, on: {change: _this.handleChange}}),
  cr('button',{'class': {'down-btn':true,'dis':this.currentValue>=this.max},on: {click: _this.handleUp},},['+']),
 ])
}

定义 watch 和 methods

watch: {
 value(val) {
  this.updateValue(val)
 },
 currentValue(val) {
  this.$emit('input', val)
  this.$emit('on-change', val)
 }
},
methods: {
 updateValue(val) {
  if(val > this.max) val = this.max
  if(val < this.min) val = this.min
  this.currentValue = val
 },
 handleDown() {
  if(this.currentValue<=this.min) return
  this.currentValue-=1
 },
 handleUp() {
  if(this.currentValue>=this.max) return
  this.currentValue+=1
 },
 handleChange(ev) {
  let val = ev.target.value.trim()
  let max = this.max
  let min = this.min
  if(this.isValueNumber(val)) {
   val = Number(val)
   this.currentValue = val
   if(val > max) {
    this.currentValue = max
   } else if(val < min) {
    this.currentValue = min
   }
  }else {
   ev.target.value = this.currentValue
  }
 },
 isValueNumber(val) {
  return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(val+'')
 }
}

最后是Less部分代码

<style lang="less">
* {
 box-sizing: border-box;
}
.demo {
 width: 200px;
 margin: 0 auto;
}
.input-number {
 width: 100%;
 display: flex;
 height: 40px;
 align-items: center;
 justify-content: space-between;
 .down-btn,.up-btn {
  font-size: 18px;
  width: 40px;
  height: 40px;
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  outline: none;
  &.up-btn {
   border-radius: 0 4px 4px 0;
  }
  &.dis {
   cursor: not-allowed;
  }
 }
 .change-input {
  flex: 1;
  max-width: 100px;
  outline: none;
  border: none;
  text-align: center;
  height: 40px;
 }
}
</style>

总结

以上所述是小编给大家介绍的Vue数字输入框组件示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
nuxt.js 缓存实践
Jun 25 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 #Javascript
JS 事件机制完整示例分析
Jan 15 #Javascript
JS实现滑动插件
Jan 15 #Javascript
JS实现滑动导航效果
Jan 14 #Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 #Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 #Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 #Javascript
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python决策树分类算法学习
2017/12/22 Python
python变量命名的7条建议
2019/07/04 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
优秀大学生职业生涯规划书
2014/02/27 职场文书
文化产业实施方案
2014/06/07 职场文书
中学清明节活动总结
2014/07/04 职场文书
大学生学年个人总结
2015/02/15 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript