基于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 ...
随机推荐
- SublimeCodeIntel代码自动补全配置
主要使用python3,所有配置以python3为例.其他语言同理.利用sublimeCodeIntel插件可以实现自动提示python3代码.跳转追踪自定义函数.查看系统函数等.功能还是相当强大的. ...
- POJ 2960 S-Nim 博弈论 sg函数
http://poj.org/problem?id=2960 sg函数几乎是模板题. 调试代码的最大障碍仍然是手残在循环里打错变量名,是时候换个hydra产的机械臂了[超想要.jpg] #includ ...
- Manacher算法总结
部分图片转自:http://www.cnblogs.com/grandyang/p/4475985.html manacher算法(民间称马拉车算法233)是用来找字符串中的最长回文子串的,先来说一下 ...
- HDU 5967 小R与手机（动态树）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5967 [题目大意] 给出一张图,每个点仅连一条有向边,或者不连, 要求查询在可更改有向边的情况每个 ...
- 重拾vue2
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二. ...
- PHP与Web页面的交互
1.form表单默认情况下提交数据的方式为get方式. 2.PHP脚本用来处理表单数据的预定义变量是$_GET,$_POST(区分大小写) 代码示例:(特别注意复选框属性name的时候加数组) sim ...
- Android：布局实例之模仿QQ登录界面
预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...
- openfire自定义发送消息
加入以下类: 这个是xml格式的,解析时可以将xml转成map,参数可自由定义 import org.jivesoftware.smack.packet.PacketExtension; /** * ...
- 前端对比插件JS
https://github.com/kpdecker/jsdiff demo http://kpdecker.github.io/jsdiff/ 缺点:文件大于10M的就比较不了了 用于比对两段HT ...
- static_cast ，reinterpret_cast
用法:static_cast < type-id > ( expression ) 该运算符把expression转换为type-id类型,但没有运行时类型检查来保证转换的安全性.它主要有 ...