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 ...
随机推荐
- linux安装lamp/lamp/lanmp
wdcp安装lamp/lanp/lanmp 和宝塔(centOS)1. yum install -y wget //yum安装wegt2. wget http://dl.wdlinux.cn/fil ...
- 构建 Owin 中间件 来获取客户端IP地址
Not so long ago, we discussed on this blog the possible ways of retrieving the client’s IP address i ...
- C++ Windows API 读写INI文件
BOOL WritePrivateProfileString( LPCTSTR lpAppName, // INI文件中的一个字段名[节名]可以有很多个节名 LPCTSTR lpKeyName, // ...
- laravel----------如何优化laravel框架
1.关闭debug (打开.env文件,把debug设置为false.) 2.缓存路由和配置(清除:php artisan config:clear php artisan route:clear ...
- mysql查看当前执行线程_关闭当前的某些线程 show processlist_kill
每个与mysqld的连接都在一个独立的线程里运行,您可以使用SHOW PROCESSLIST语句查看哪些线程正在运行,并使用KILL thread_id语句终止一个线程. 如果您拥有SUPER权限,您 ...
- Zookeeper 3.5启动时 8080端口被占用
今天闲来无事,学习Zookeeper,下载了Zookeeper的最新版本3.5.启动以后显示: ZooKeeper JMX enabled by default Using config: /opt/ ...
- 记录Ok6410 sd 启动uboot
1\参考资料https://github.com/SeanXP/ARM-Tiny6410/tree/master/no-os/sd-no-os/u-boot 2\参考资料https://blog.cs ...
- Kafka学习之(二)Centos下安装Kafka
环境:Centos6.4,官方下载地址:http://kafka.apache.org/downloads ,前提是还需要安装了Java环境,本博客http://www.cnblogs.com/wt ...
- jQuery 筛选器2
jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...
- Shell data、timedatectl
data系统时间管理命令 命令date +%F xxxx—xx--xx #查看当前日期. 命令date +%T xx:xx:xx #查看当前时间. 命令date +%y xx #年2位 命令date ...