您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

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

时间:2020-4-10 9:37:09

  核心提示:数字输入框组件实现功能:只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。为了方便,这里选用Vue的 cli-service实现快速原型开发首先template部分代码?12345templ...

数字输入框组件

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

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

实现快速原型开发

首先template部分代码

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

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

主要JS部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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() 函数的方式

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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数字输入框组件示例代码

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号