使用Vue开发数字输入框组件

标签: vue 数字输入框 组件
21人阅读 评论(0) 收藏 举报
分类:

最近在通过《Vue.js实战》系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。
源代码:https://github.com/zndada/learnVue

项目整体结构

├── 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组件踩坑与心得

1、子组件不允许修改父组件数据 之前在写angular的父子组件传递数据,子组件可以修改父组件传递进来的数据。不过在Vue中子组件不允许修改父组件穿进来的值,以vue举例来说 children-...
  • sinat_17775997
  • sinat_17775997
  • 2017-10-30 10:56:29
  • 474

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

为什么学习并使用Vue1.发展趋势最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,...
  • ZYGG5521
  • ZYGG5521
  • 2017-06-07 10:55:43
  • 2904

Vue 模板

window.onload = function(){ var vm =
  • H1069495874
  • H1069495874
  • 2017-02-15 23:13:19
  • 492

Vue 折腾记 - (4) 写一个不大靠谱的 loading 组件

前言有需求,就要动手丰衣足食…公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下...
  • bomess
  • bomess
  • 2017-07-21 12:13:51
  • 669

Vue组件踩坑与心得

事实上的确如此,产品需求总是千奇百怪。正如我公司现在的产品,引用的是elemen-ui的库,但是无法级联多选,下拉多选的展现形式不对,穿梭框无法上下移动等各种需求逼迫我们只能自己去写组件实现了。 ...
  • qq_40479190
  • qq_40479190
  • 2017-10-29 17:56:04
  • 195

从documentfragement到实现手写vue

本文来源于我的github转载时注明出处 0.剧透 vue的实现,分为M-V,V-M,M-V三个阶段,第一个阶段主要利用fragement文档片段来节点劫持,使得M和V层关联起来。第二阶段,利...
  • qq_32560473
  • qq_32560473
  • 2018-03-31 23:29:16
  • 5

使用Vue开发数字输入框组件

最近在通过《Vue.js实战》系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码:ht...
  • zn740395858
  • zn740395858
  • 2018-04-16 20:37:30
  • 21

vue常见面试题

1:什么是mvvm?MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI ...
  • farsight1
  • farsight1
  • 2018-03-20 17:29:21
  • 357

手写小时间控件

一开始先上效果: 说明: 环境:移动端(android和iOS), 业务场景:需要一个预期一个月内可选的时间范围控件 本来想用现成的插件,但是一哥们最近刚刚面试,回来对我吐槽面试官问他一般遇到时间需求...
  • xizai2012
  • xizai2012
  • 2015-07-30 03:43:30
  • 1064
    个人资料
    等级:
    访问量: 6640
    积分: 365
    排名: 20万+