Vue第一个自定义组件：数字输入框(number-input)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字输入框</title>
<script type="text/javascript" src="js/lib/vue.js"></script>
<script type="text/javascript" src="js/input-test-num.js"></script>
</head>
<body>
<div id="app">
{{value}}
<number-input v-model="value" :max="10" :min="-10" :step="2"></number-input>
</div>
</body>
<script type="text/javascript">
function isValueNumber(value){
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value);
} var app = new Vue({
el:'#app',
data:{
value:0
}
});
</script>
</html>
JS:input-test-num.js
Vue.component('number-input',{
// 定义来自父级的参数
props:{
max:{
type:Number,
default:Infinity
},
min:{
type:Number,
default:-Infinity
},
value:{
type:Number,
default:0
},
step:{
type:Number,
default:1
}
},
template:'\
<div>\
<input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown" />\
<button @click="handleAdd" :disabled="currentValue>=max"> ADD </button>\
<button @click="handleReduce" :disabled="currentValue<=min"> Reduce </button>\
</div>',
data:function(){
// Vue组件是单向数据流，无法直接修改prop中的值
var currentValue = 0 ;
if(this.value > this.max){
currentValue = this.max ;
} else if(this.value < this.min){
currentValue = this.min ;
} else{
currentValue = this.value ;
}
return {
currentValue :currentValue
}
},
methods:{
handleChange:function(event){
var val = event.target.value.trim() ;
if(isValueNumber(val)){
var max = this.max ;
var min = this.min ;
val = Number(val);
this.currentValue = val ;
if(val>max) this.currentValue = max ;
if(val<min) this.currentValue = min ;
}else{
// 如果输入的非数字，则保留之前的数据
event.target.value = this.currentValue ;
}
},
// 绑定键盘事件
handleKeydown:function(event){
if(event.keyCode==38){
this.handleAdd();
}
if(event.keyCode==40){
this.handleReduce() ;
}
},
handleAdd:function(){
if(this.currentValue>=this.max) return ;
this.currentValue += this.step ;
},handleReduce:function(){
if(this.currentValue<=this.min) return ;
this.currentValue -= this.step;
},
updateVal:function(val){
if(val>this.max) val = this.max ;
if(val<this.min) val = this.min ;
this.currentValue = val ;
}
},
watch:{
// 增加监听
currentValue:function(val){
this.$emit('input',val);
this.$emit('on-change',val);
},
value:function(val){
this.updateVal(val);
}
}
})
！可根据自己情况增加样式
Vue第一个自定义组件：数字输入框(number-input)的更多相关文章
- 《vue.js实战》练习---数字输入框组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Vue.extend提供自定义组件的构造器
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vue之全局自定义组件
在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...
- 【vue】canvas验证码组件--数字/数字加字母
基于canvas的数字/数字+字符验证码 SIdentify.vue 组件 <!-- 基于canvas的数字/数字+字符验证码 --> <!-- 调用格式 <s-ident ...
- Vue图片验证码-自定义组件高级版
最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...
- 使用vue的extend自定义组件开发
index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); cons ...
随机推荐
- 02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
- MySQL基于binlog主从复制
MySQL复制介绍 默认情况 下复制是异步进行的,从库也不需要一直连接到主库来同步数据 MySQL复制的数据粒度可以是主实例上所有的数据库,也可以是指定的一个或多个数据库 ,也可以是一个数据库里的指定 ...
- TCP那些事儿(上)
TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...
- docker基础及安装
Docker介绍: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...
- 文件无法删除java.io.IOException: Unable to delete
疑问:1.为什么调用file.delete()方法时,返回值为false. 2.为什么调用Guava工具jar包中的Files.move(from,to) ,报异常:java.io.IOExcepti ...
- PyCharm配置autopep8，自动格式化Python代码
1. 关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:h ...
- 对List中每个对象元素按时间顺序排序
需求: 需要对List中的每个User按照birthday顺序排序,时间由小到大排列. 代码实现: import java.text.SimpleDateFormat; import java.uti ...
- 前端-高潮 jQuery
jQuery:就是让页面动起来 参考手册:http://jquery.cuishifeng.cn/ DOM/BOM/javaScript 继承的类库 <--->模块 一.查找元素 二.操作 ...
- 洛谷P2286 [HNOI2004]宠物收养场【Treap】题解+AC代码
题目传送门啦~啦~啦~ 题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的 ...
- bzoj[1835][ZJOI2010]base 基地选址
bzoj[1835][ZJOI2010]base 基地选址 标签: 线段树 DP 题目链接 题解 这个暴力DP的话应该很容易看出来. dp[i][j]表示造了i个通讯站,并且j是第i个的最小费用. \ ...