说说如何在Vue.js中实现数字输入组件的方法

 更新时间:2019-01-08 12:00:37   作者:佚名   我要评论(0)

我们对普通输入框进行扩展,实现一个可快捷输入数字组件。


首先制定规则:

只能输入数字。
设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。

我们对普通输入框进行扩展,实现一个可快捷输入数字组件。

首先制定规则:

  • 只能输入数字。
  • 设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。
  • 数字输入组件可设置初始值、最大值与最小值。

接着,规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot,我们需要定义这三个部分的命名以及业务规则。这个组件比较简单,所以我们只用到  props 与 events。

1 基础版

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数字输入组件</title>
</head>
<body>
<div id="app">
  <number-input v-model="value" :min="0" :max="6"></number-input>
</div>
<script src="http://files.jb51.net/file_images/article/201901/201918105220295.gif?201908105249" alt="" />

2 按键支持

当输入框获得焦点时,按下“向上键”时,增长;按下“向上键”时,减少。

这可以利用按键修饰符来实现,我们修改示例中的组件模板:

...
 <input 
      type="text"
      :value="currentVal"
      @change="change"
      @keyup.up="up"
      @keyup.down="down">
...

Vue.js 定义按键别名有这些:

  • .enter
  • .tab
  • .delete(捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

效果:

3 控制步伐

新增一个步伐属性,增长或者减少以步伐值为变化量。之前的示例,步伐为 1。

首先在 props 中,定义一个步伐属性:

//步伐
step: {
  type: Number,
  default: 1
}

然后在增长与减少函数中,使用步伐属性做为变化量:

/**
 * 减少
 */
down: function () {
  if (this.currentVal <= this.min) {
    return;
  }
  this.currentVal -= this.step;
},
/**
 * 增长
 */
up: function () {
  if (this.currentVal >= this.max) {
    return;
  }
  this.currentVal += this.step;
},

最后为组件重新配置参数:

<number-input v-model="value" :min="0" :max="50" :step="5"></number-input>

效果:

本文示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 基于Vue开发数字输入框组件
  • Vue实现数字输入框中分割手机号码的示例
  • 使用vue编写一个点击数字计时小游戏

相关文章

  • 说说如何在Vue.js中实现数字输入组件的方法

    说说如何在Vue.js中实现数字输入组件的方法

    我们对普通输入框进行扩展,实现一个可快捷输入数字组件。 首先制定规则: 只能输入数字。 设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。
    2019-01-08
  • 利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法

    利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法

    由于跑编码的需要,所以需要制作一个.yuv格式的图片数据集,但是手头只有.jpg格式的,故记录下转换过程。其他图片格式也可以,代码里修改一下就行。 ①安装ff
    2019-01-08
  • Java开发中可以防止界面假死的刷新代码

    Java开发中可以防止界面假死的刷新代码

    代码如下: try { // 创建一个线程 Thread thread = new Thread() { public void run() { int i = 0; while(true){ final long start = Sys
    2019-01-08
  • vue单文件组件lint error自动fix与styleLint报错自动fix详解

    vue单文件组件lint error自动fix与styleLint报错自动fix详解

    问题描述 之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配
    2019-01-08
  • JavaScript学习笔记之DOM操作实例分析

    JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. "D":Docment,指的是文档 2. “O”:Object,指的是对象,在
    2019-01-08
  • MySQL执行计划的深入分析

    MySQL执行计划的深入分析

    前言 在之前的面试过程中,问到执行计划,有很多童鞋不知道是什么&#63;甚至将执行计划与执行时间认为是同一个概念。今天我们就一起来了解一下执行计划到底是什么
    2019-01-08
  • 对python mayavi三维绘图的实现详解

    对python mayavi三维绘图的实现详解

    网上下载mayavi的官方帮助文档,里面有很多例子,下面的记录都是查看手册后得到的。 http://code.enthought.com/projects/mayavi/docs/development/latex/may
    2019-01-08
  • 一个因@click.stop引发的bug的解决

    一个因@click.stop引发的bug的解决

    问题 在项目页面中使用 element popover,设置trigger='click'时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜
    2019-01-08
  • 易语言模拟鼠标点击实现方法

    易语言模拟鼠标点击实现方法

    易语言对于初学者而言是一种非常好学的中文编程语言,能够快速地实现很多功能,全汉语编程,简单易上手,易语言功能强大实用,系统全部自行设计开发,且易语言
    2019-01-08
  • Django之模型层多表操作的实现

    Django之模型层多表操作的实现

    一、创建模型 1,一对多关系 一本书只有一个出版社,一个出版社可以出版多本书,从而书与出版社之间就构成一对多关系,书是‘多'的一方,出版社是‘一'的一方
    2019-01-08

最新评论