基于Vue的数字输入框组件开发
2018-06-24 01:05:30来源：未知 阅读 ()
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
}
})
注：组件开发的知识，详见注释。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：VUE 方法
下一篇：Vue slot分发内容
- 基于JQuery的多标签实现代码 2020-03-29
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
