数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图:

代码:

 <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(八) 数字输入框组件案例的更多相关文章

  1. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  2. [Input-number]数字输入框组件

    需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...

  3. 《vue.js实战》练习---数字输入框组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 前端笔记之Vue(二)组件&案例&props&计算属性

    一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...

  5. 用Vue自己造个组件轮子,以及实践背后带来的思考

    前言 首先,向大家说声抱歉.由于之前的井底之蛙,误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里.现在我错了,从我司的前端技术选型之路便可见端倪.以太原为例,已经有不少公司陆续开始采用Vue. ...

  6. Vue第一个自定义组件:数字输入框(number-input)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue全家桶之组件化开发

    Vue全家桶之组件化开发   一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码   二. 组件注册 2.1 全局注册 Vue. ...

  8. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  9. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

随机推荐

  1. linux安装lamp/lamp/lanmp

    wdcp安装lamp/lanp/lanmp 和宝塔(centOS)1. yum install -y wget  //yum安装wegt2. wget http://dl.wdlinux.cn/fil ...

  2. 构建 Owin 中间件 来获取客户端IP地址

    Not so long ago, we discussed on this blog the possible ways of retrieving the client’s IP address i ...

  3. C++ Windows API 读写INI文件

    BOOL WritePrivateProfileString( LPCTSTR lpAppName, // INI文件中的一个字段名[节名]可以有很多个节名 LPCTSTR lpKeyName, // ...

  4. laravel----------如何优化laravel框架

    1.关闭debug (打开.env文件,把debug设置为false.) 2.缓存路由和配置(清除:php artisan config:clear  php artisan route:clear  ...

  5. mysql查看当前执行线程_关闭当前的某些线程 show processlist_kill

    每个与mysqld的连接都在一个独立的线程里运行,您可以使用SHOW PROCESSLIST语句查看哪些线程正在运行,并使用KILL thread_id语句终止一个线程. 如果您拥有SUPER权限,您 ...

  6. Zookeeper 3.5启动时 8080端口被占用

    今天闲来无事,学习Zookeeper,下载了Zookeeper的最新版本3.5.启动以后显示: ZooKeeper JMX enabled by default Using config: /opt/ ...

  7. 记录Ok6410 sd 启动uboot

    1\参考资料https://github.com/SeanXP/ARM-Tiny6410/tree/master/no-os/sd-no-os/u-boot 2\参考资料https://blog.cs ...

  8. Kafka学习之(二)Centos下安装Kafka

    环境:Centos6.4,官方下载地址:http://kafka.apache.org/downloads  ,前提是还需要安装了Java环境,本博客http://www.cnblogs.com/wt ...

  9. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  10. Shell data、timedatectl

     data系统时间管理命令 命令date +%F xxxx—xx--xx #查看当前日期. 命令date +%T xx:xx:xx #查看当前时间. 命令date +%y xx #年2位 命令date ...