扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
我们对普通输入框进行扩展，实现一个可快捷输入数字组件。
创新互联专注于兰溪企业网站建设,自适应网站建设,商城开发。兰溪网站建设公司,为兰溪等地区提供建站服务。全流程按需网站制作，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
首先制定规则：
接着，规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到 props 与 events。
1 基础版
html：
数字输入组件
这里，我们使用了 v-model，双向绑定了 value。
number.js：
/**
* 是否为数字
* @param val
* @returns {boolean}
*/
function isNum(val) {
return (/^[0-9]*$/).test(val);
}
/**
* 数字输入组件
*/
Vue.component('number-input', {
template: '\
\
\
-\
+\
',
props: {//校验
//最大值
max: {
type: Number,
default: Infinity
},
//最小值
min: {
type: Number,
default: -Infinity
},
//初始值
value: {
type: Number,
default: 0
}
},
data: function () {
return {
currentVal: this.value
}
},
watch: {
currentVal: function (val) {
console.log("currentVal:" + this.currentVal);
this.$emit('input',val);
},
value: function (val) {//更新 currentVal
this.update(val);
}
},
methods: {
/**
* 更新
* @param val
*/
update: function (val) {
//让输入的值在限定范围内
if (val > this.max) {
val = this.max;
}
if (val < this.min) {
val = this.min
}
this.currentVal = val;
},
/**
* 减少
*/
down: function () {
if (this.currentVal <= this.min) {
return;
}
this.currentVal -= 1;
},
/**
* 增长
*/
up: function () {
if (this.currentVal >= this.max) {
return;
}
this.currentVal += 1;
},
/**
* 如果输入的值，
* @param event
*/
change: function (event) {
var val = event.target.value.trim();//获取输入值
if (isNum(val)) {//赋值 currentVal
val = Number(val);
this.currentVal = val;
//超出限定范围时，规整
var max = this.max;
var min = this.min;
if (val > max) {
this.currentVal = max;
} else if (val < min) {
this.currentVal = min;
}
} else {//还原为 currentVal
event.target.value = this.currentVal;
}
}
},
mounted: function () {
//对初始值进行范围限定
this.update(this.value);
}
});
这里，我们专门定义了一个 number.js，用于定义数字输入组件。
在 number.js 中，我们做了如下工作：
效果：
2 按键支持
当输入框获得焦点时，按下“向上键”时，增长；按下“向上键”时，减少。
这可以利用按键修饰符来实现，我们修改示例中的组件模板：
... ...
Vue.js 定义按键别名有这些：
效果：
3 控制步伐
新增一个步伐属性，增长或者减少以步伐值为变化量。之前的示例，步伐为 1。
首先在 props 中，定义一个步伐属性：
//步伐
step: {
type: Number,
default: 1
}
然后在增长与减少函数中，使用步伐属性做为变化量：
/**
* 减少
*/
down: function () {
if (this.currentVal <= this.min) {
return;
}
this.currentVal -= this.step;
},
/**
* 增长
*/
up: function () {
if (this.currentVal >= this.max) {
return;
}
this.currentVal += this.step;
},
最后为组件重新配置参数：
效果：
本文示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网