Vue(八) 数字输入框组件案例
数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图:
代码:
<div id="app">
<input-number v-model="value" :max="100" :min="0"></input-number>
</div>
<script>
function isValueNumber (value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
}
Vue.component('input-number', {
template: '\
<div class="input-number">\
<input \
type="text"\
:value="currentValue"\
@change="handleChange"\
@keyup.up="handleUp"\
@keyup.down="handleDown">\
<button \
@click="handleDown" \
:disabled="currentValue <= min">-</button> \
<button \
@click="handleUp" \
:disabled="currentValue >= max">+</button> \
</div>',
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
data: function() {
return {
currentValue: this.value
}
},
watch: {
currentValue: function (val) {
this.$emit('input', val);
this.$emit('on-change', val);
},
value: function (val) {
this.updateValue (val);
}
},
methods: {
handleDown: function () {
if(this.currentValue <= this.min) return;
this.currentValue -= 1;
},
handleUp: function () {
if(this.currentValue >= this.max) return;
this.currentValue += 1;
},
updateValue: function (val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
handleChange: function (event) {
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;
}
}
},
mounte: function () {
this.updateValue(this.value);
},
});
var app = new Vue({
el: '#app',
data: {
value: 5
}
})
</script>
Vue(八) 数字输入框组件案例的更多相关文章
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- [Input-number]数字输入框组件
需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...
- 《vue.js实战》练习---数字输入框组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 前端笔记之Vue(二)组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- 用Vue自己造个组件轮子,以及实践背后带来的思考
前言 首先,向大家说声抱歉.由于之前的井底之蛙,误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里.现在我错了,从我司的前端技术选型之路便可见端倪.以太原为例,已经有不少公司陆续开始采用Vue. ...
- Vue第一个自定义组件:数字输入框(number-input)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
随机推荐
- hbase 快速开发
hbase是一个分布式的NoSQL,部署起来配置很多东西,开发起来太慢,可以使用docker快速搭建环境 gs@gs-virtual-machine:~$ sudo docker run -ti ha ...
- pycharm的简介
pycharm使用 集成开发环境(IDE,Integrated Development Environment ) VIM #经典的linux下的文本编辑器 Emacs #linux 文本编辑器, 比 ...
- C++ const用法 尽可能使用const
C++ const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不变的.如果在编程中确实有某个值保持不变,就应该明确使用const,这样可以获得编译器的帮助. 1.c ...
- 发布自己的npm包、开源项目
背景:由于最近在做项目之余想做一些其他的事,所以东找找西找找的,最后决定写一个封装一些常用原型方法的NPM包,但不仅限于此.话不多说,说一下实践过程. 一.注册NPM及如何上传NPM包参考连接:htt ...
- 第二章 函数和window对象
1.什么是函数函数相当于Java中的方法,每一个函数可以做一件事情,但是不属于某一个类 2.使用函数的好处:使代码模块化,功能分工明确,方便调用,思路功能清晰 3.函数的分类:(1)系统函数:系统提前 ...
- scrum学习笔记
http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-1 推荐电子书 <Scrum精髓_敏捷转型指南> ...
- poj3155 最大密度子图
求最大密度子图 记得在最后一次寻找的时候记得将进入的边放大那么一点点,这样有利于当每条边都满流的情况下会选择点 #include <iostream> #include <algor ...
- keepalived weight正负值问题(实现主服务器nginx故障后迅速切换到备服务器)
有两台负载均衡,lb01,lb02. lb02, priority值为100 编辑keepalived配置文件 vim /etc/keepalived/keepalived.conf ! Con ...
- linux中make的有关规则的特性
我过去认为 makefile 只是一种将一组组的 shell 命令列出来的简便方法:过了一段时间我了解到它们是有多么的强大.灵活以及功能齐全.这篇文章带你领略其中一些有关规则的特性. 规则 规则是指示 ...
- Netty源码分析之服务端启动
Netty服务端启动代码: public final class EchoServer { static final int PORT = Integer.parseInt(System.getPro ...