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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JS实现骰子3D旋转效果
Oct 24 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php中使用sftp教程
2015/03/30 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
bpython 功能强大的Python shell
2016/02/16 Python
Python使用剪切板的方法
2017/06/06 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
施工材料员岗位职责
2014/02/12 职场文书
中学生家长评语大全
2014/04/16 职场文书
公司捐款倡议书
2014/05/14 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS