酒店优化

src/components/numberInputStep.vue

+<style scoped>
+.icon-size {
+    font-size: 20px;
+}
+.number {
+    width: 60px;
+    text-align: center;
+}
+</style>
+<template>
+    <div>
+                    <i class="iconfont iconminus icon-size" @click="minusClick"></i>
+                    <span class="number">{{value}}</span>
+                    <i class="iconfont iconplus icon-size" @click="plusClick"></i>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        min: {
+            default: undefined,
+        },
+        max: {
+            default: undefined,
+        },
+        defaultValue: {
+            require: true,
+            default: 0,
+        },
+        step: {
+            default: 1,
+        },
+    },
+    data() {
+        return {
+            value: this.defaultValue
+        }
+    },
+    methods: {
+        minusClick() {
+            if(this.min === undefined || this.value > this.min) {
+                this.value-= this.step
+                this.$emit('input', this.value)
+            }
+        },
+        plusClick() {
+            if(this.max === undefined || this.value < this.max) {
+                this.value+= this.step
+                this.$emit('input', this.value)
+            }
+        }
+    },
+}
+</script>
\ No newline at end of file