《前端开发体系结构》
期末大作业
学号：
姓名：
项目一：购物车中录入购买数量
• 组件功能：
文本输入框中输入购买数量：默认数量是5，点击加号按钮，数量加1，点击减号按钮，数量减一。当数量是0时，减一按钮不可用，当数量是10时，加一按钮不可用。程序加载时，默认值是5。
2 实现的效果：
3 代码实现：
HTML部分
程序代写代做 html 《前端开发体系结构》
CSS部分代码：
JS部分代码：
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + ‘ ‘); //正则表达式
}
Vue.component(‘input-number’, { //创建全局组件 input-number
template: ‘\
\
–\
= max”>+\
‘,
props: {
max: { //最大值
type: Number,
default: Infinity
},
min: { //最小值
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
},
step: { //每次增加的步数
type: Number,
default: 1
}
},
data: function () {
return {
currentValue: this.value //获取当前的值
}
},
watch: {
currentValue: function (val) {
this.$emit(‘input’, val);
this.$emit(‘on-change’, val);
},
value: function (val) {
this.updateValue(val);
}
},
methods: {
handleChange: function (event) {
var val = event.target.value.trim(); //trim()去掉空格
if (isValueNumber(val)) {
var max = this.max;
var min = this.min;
val = Number(val);
this.currentValue = val;
if (val > max) this.currentValue = max; //控制当传过来的值超过最大值时，取最大值10
if (val < min) this.currentValue = min; //控制传过来的值小于最小值时，取最小值0
} else {
event.target.value = this.currentValue;
}
},
handleKeydown: function (event) { //通过键盘上的按键控制数量的加减
if (event.keyCode == 38) {
this.handleAdd();//38是上箭头
}
if (event.keyCode == 40) {
this.handleReduce();//40是下箭头
}
},
handleAdd: function () {
if (this.currentValue >= this.max) return;
this.currentValue += this.step;
},
handleReduce: function () {
if (this.currentValue <= this.min) return;
this.currentValue -= this.step;
},
updateValue: function (val) {
if (val > this.max) val = this.max;
if (val < this.min) val = this.min;
this.currentValue = val;
}
},
mounted: function () {
this.updateValue(this.value);
},
});