次数设置

frontend/src/components/calc/input/index.vue

@@ -1,44 +1,69 @@
 <script lang="tsx">
-import { useVModel } from "@vueuse/core"
-import { defineComponent } from "vue"
+import { useVModel } from '@vueuse/core'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: "IInput",
+  name: 'IInput',
   props: {
     modelValue: {
       type: [String, Number],
-      default: ""
-    }
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
   },
   setup(props) {
-    const modelValue = useVModel(props, "modelValue")
-    return () => <input v-model={modelValue.value} class="i-input" />
-  }
+    const modelValue = useVModel(props, 'modelValue')
+    return () => (
+      <div class="flex min-w-80px h-20px border-1 border-solid border-[#5b472a] rounded-[2px] bg-[#000000]">
+        <input
+          class="flex-1 border-none w-full outline-none h-auto line-height-100% text-[#937639] m-0 bg-[#000000]"
+          type={props.type}
+          v-model={modelValue.value}
+        />
+        {props.type == 'number' && (
+          <div class="h-full">
+            <div
+              class="input-number-upper h-50% w-10px"
+              onClick={() => (modelValue.value = Number(modelValue.value) + 1)}
+            ></div>
+            <div
+              class="input-number-lower h-50% w-10px"
+              onClick={() => (modelValue.value = Math.max(Number(modelValue.value) - 1, props.min))}
+            ></div>
+          </div>
+        )}
+      </div>
+    )
+  },
 })
 </script>
 
 <style lang="scss">
-  .i-input {
-    min-width: 80px;
-    width: 178px;
-    user-select: none;
-    outline: none;
-    height: 20px;
-    min-height: 16px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: #937639;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
-    margin: 0;
-    padding-left: 10px;
-  }
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
 
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
+.input-number-upper {
+  background-image: url('@/assets/img/icon/input_upper.png');
+  background-size: 8px auto;
+  background-position: bottom 1px right 2px;
+  background-repeat: no-repeat;
+}
+
+.input-number-lower {
+  background-image: url('@/assets/img/icon/input_lower.png');
+  background-size: 8px auto;
+  background-position: top 1px right 2px;
+  background-repeat: no-repeat;
+}
 </style>