程序代写代做 html 《前端开发体系结构》

《前端开发体系结构》

期末大作业

学号:
姓名:

项目一:购物车中录入购买数量
• 组件功能:
文本输入框中输入购买数量:默认数量是5,点击加号按钮,数量加1,点击减号按钮,数量减一。当数量是0时,减一按钮不可用,当数量是10时,加一按钮不可用。程序加载时,默认值是5。
2 实现的效果:

3 代码实现:
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);     }, });