基于Vue的数字输入框组件开发
1、概述
Vue组件开发的API：props、events和slots
2、组件代码
github地址：https://github.com/MengFangui/VueInputNumber
效果：
（1）index.html
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>基于Vue开发的数字输入框组件</title>
</head> <body>
<div id="app">
<!--数字输入框组件命名为：input-number-->
<!--数字输入框组件默认值为5，最大值为10，最小值为0,step为步伐，默认值为1-->
<!--使用v-bind(语法糖:)来传递动态数据 父组件的数据变化时也传递给子组件-->
<!--v-model 绑定数据（子组件对父组件通信） 其实就是@input事件(input输入框的value值发生变化时就会触发input事件) 使用v-model通信有局限性（因需要触发input事件）-->
<input-number v-model='value' :max='10' :min='0' :step='2'></input-number>
<!--也可以使用自定义事件通信（子组件对父组件通信）-->
<!--<input-number @on-change='value' :max='10' :min='0' :step='2'></input-number>-->
</div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<!--注意js引用顺序 先全局注册组件 后创建实例-->
<script src="js/input-number.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script> </body> </html>
(2)input-number.js
//验证输入值是否为数字
function isValueNumber(value) {
return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-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中的数据来自父组件
//props实现与父组件的通信（父组件-->子组件）
//对每个props进行校验，props的值可以是数组，也可以是对象，组件需要给别人使用时，推荐都进行数据验证
props: {
max: {
//必须是数字类型
type: Number,
//默认值为Infinity
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
},
step: {
type: Number,
default: 1
}
},
//data是本组件的数据，作用域是组件本身
//Vue组件为单向数据流，data为一个函数，currentValue设置为父组件的value，在input-number组件内部维护currentValue
data: function() {
return {
//子组件将父组件传递过来的值进行保存，在本组件的作用域下进行使用
currentValue: this.value
}
},
//监听watch：监听data或者props的变化
watch: {
//监听子组件currentValue是否改变
currentValue: function(val) {
//$emit与父组件通信 （子组件-->父组件）
//this指向当前组件实例
this.$emit('input', val);
//定义自定义函数进行通信
this.$emit('on-change', val)
},
//监听父组件value是否改变
value: function(val) {
this.updateValue(val);
}
},
methods: {
//父组件传递过来的值可能不符合条件（大于最大值，小于最小值）
updateValue: function(val) {
if(val > this.max) {
val = this.max;
}
if(val < this.min) {
val = this.min;
}
this.currentValue = val;
},
handleDown: function() {
this.currentValue -= this.step;
if(this.currentValue <= this.min) {
this.currentValue = this.min;
}
},
handleUp: function() {
this.currentValue += this.step;
if(this.currentValue >= this.max) {
this.currentValue = this.max;
}
},
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.current = max;
}
if(val < min) {
this.current = min;
}
} else {
//如果输入的不是数字，将输入的内容重置为之前的currentValue
event.target.value = this.currentValue;
}
},
},
//初始化
mounted: function() {
this.updateValue(this.value);
}
})
说明：template的DOM结构需要被一个元素包含，如div，否则无法渲染。
(3)index.js
var app = new Vue({
el: '#app',
data: {
//数字输入框组件默认值为5
value: 5
}
})
注：组件开发的知识，详见注释。
基于Vue的数字输入框组件开发的更多相关文章
- Vue(八) 数字输入框组件案例
数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图: 代码: <div id="app"> <input-number v-model=" ...
- [Input-number]数字输入框组件
需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...
- Visual-platform，基于Vue的可视化大屏开发GUI框架
visual-platform 基于Vue的可视化大屏开发GUI框架 ------ CreatedBy 漆黑小T 构建用于开发可视化大屏项目的自适应布局的GUI框架. github仓库: https: ...
- 基于GBT28181：SIP协议组件开发-----------第四篇SIP注册流程eXosip2实现(一)
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3945294.html. 上章节讲解了利用自主开发的组件SIP组件l ...
- Step by Step: 基于MFC下的COM组件开发-Helloworld
http://blog.csdn.net/sybifei/article/details/45008745 [这篇文章有问题, 仅供参考] http://blog.csdn.net/define_us ...
- 《vue.js实战》练习---数字输入框组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 饿了么基于Vue2.0的通用组件开发之路（分享会记录）
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- GearCase UI - 自己构建一套基于 Vue 的简易开源组件库
最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...
- 基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...
随机推荐
- RabbitMQ (十五) 镜像集群 + HAProxy1.7.8 负载均衡
RabbitMQ 默认的集群模式,也就是普通模式,最大的问题就在于存储队列完整数据的节点一旦宕机, 如果是非持久化队列,则消息丢失;如果是持久化队列+持久化消息,则必须等该节点恢复. 所以后来 Rab ...
- 1. ECMAScript 6 简介--ES6
1. ECMAScript 和 JavaScript 的关系 国际标准化组织ECMA 制定了语言 ECMAScript, 该标准针对 Javascript 语言制定, 不叫Javascript 原因有 ...
- Android，几款apk工具
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 可以查看到链接的设备 可以查看到wifi密码,这个也是个开源的 可以查询驾照学时进度 可 ...
- Socket读取页面
http://www.knowsky.com/363189.html http://hi.baidu.com/myyers/item/f90fa3f57d89e1d243c36a34 http://h ...
- POJ1704 Georgia and Bob 博弈论 尼姆博弈 阶梯博弈
http://poj.org/problem?id=1704 我并不知道阶梯博弈是什么玩意儿,但是这道题的所有题解博客都写了这个标签,所以我也写了,百度了一下,大概是一种和这道题类似的能转换为尼姆博弈 ...
- JZYZOJ1369 [coci2012]覆盖字符串 AC自动机
http://172.20.6.3/Problem_Show.asp?id=1369 trie树如果不优化就这么往里面放这么多单词肯定超空间+超时,所以需要去掉无用的字符串(不属于原字符串的),但是一 ...
- HDOJ(HDU) 3949 XOR
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...
- 【计算几何】【圆反演】计蒜客17314 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 G. Finding the Radius for an Inserted Circle
题意:给你三个半径相同的圆,它们切在一起,然后让你往缝里一个一个地塞圆,问你塞到第k个的半径是多少. 就把上面那两个圆的切点当成反演中心,然后会反演成这个样子,两个平行直线和一个圆. 然后就是往那个圆 ...
- 【Tarjan】【LCA】【动态规划】【推导】hdu6065 RXD, tree and sequence
划分出来的每个区间的答案,其实就是连续两个的lca的最小值. 即5 2 3 4 这个区间的答案是min(dep(lca(5,2)),dep(lca(2,3),dep(lca(3,4)))). 于是dp ...
- 【随机化】Petrozavodsk Summer Training Camp 2016 Day 5: Petr Mitrichev Contest 14, Saturday, August 27, 2016 Problem I. Vier
给你一个1~n的排列,让你找出4个下标a b c d,满足 (a+b)%n=(c+d)%n (w(a)+w(b))%n=(w(c)+w(d))%n,并且是非平凡解. 发现对于每个数i,找出两个数和为其 ...