init

src/component/inputNumber/index.less

@@ -0,0 +1,139 @@
+@import "../button/index.less";
+@import "../input/index.less";
+
+@border-color: #eee;
+@hover-border-color: var(--global-primary-color);
+
+@input-number-lg: 44px;
+@input-number-lg-wdith: 200px;
+@input-number-lg-right: 22px;
+@input-number-md: 38px;
+@input-number-md-wdith: 160px;
+@input-number-md-right: 19px;
+@input-number-sm: 32px;
+@input-number-sm-wdith: 140px;
+@input-number-sm-right: 16px;
+@input-number-xs: 26px;
+@input-number-xs-wdith: 120px;
+@input-number-xs-right: 13px;
+
+.set-size(@width, @size, @right-size) {
+  & {
+    height: @size;
+    width: @width;
+
+    .layui-input {
+      height: @size;
+      line-height: @size;
+      padding: 0 @size;
+    }
+
+    .layui-control-btn {
+      width: @size;
+      height: @size;
+      line-height: @size;
+      z-index: 1;
+    }
+
+    &[position="right"] {
+      .layui-input {
+        padding: 0 @size 0 0;
+      }
+
+      .layui-control-btn {
+        height: @right-size;
+        line-height: @right-size;
+      }
+
+      .layui-subtraction-btn {
+        top: @right-size - 1;
+      }
+    }
+  }
+}
+
+.layui-input-number + .layui-input-number {
+  margin-left: 10px;
+}
+
+.layui-input-number {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px solid @border-color;
+  border-color: @border-color;
+  border-radius: var(--global-border-radius);
+  overflow: hidden;
+
+  .layui-input {
+    border: 0;
+
+    input {
+      text-align: center;
+      padding-left: 0px;
+    }
+  }
+
+  .layui-control-btn {
+    position: absolute;
+    box-sizing: border-box;
+    border: 0;
+    border-color: @border-color;
+    border-style: solid;
+    border-radius: 0;
+    padding: 0;
+    text-align: center;
+    top: 0;
+
+    &:hover {
+      color: @hover-border-color;
+    }
+
+    &.layui-subtraction-btn {
+      border-right-width: 1px;
+    }
+
+    &.layui-addition-btn {
+      border-left-width: 1px;
+      right: 0;
+    }
+
+    .layui-icon {
+      padding: 0px;
+    }
+  }
+
+  .layui-input input::-webkit-outer-spin-button,
+  .layui-input input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  .layui-input input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  &[position="right"] {
+    .layui-subtraction-btn {
+      right: 0;
+      border-right-width: 0px;
+      border-left-width: 1px;
+    }
+
+    .layui-addition-btn {
+      border-bottom-width: 1px;
+    }
+  }
+
+  &[size="lg"] {
+    .set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
+  }
+  &[size="md"] {
+    .set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
+  }
+  &[size="sm"] {
+    .set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
+  }
+  &[size="xs"] {
+    .set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
+  }
+}

src/component/inputNumber/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/inputNumber/index.vue

@@ -0,0 +1,162 @@
+<script lang="ts">
+export default {
+  name: "LayInputNumber",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import layInput from "../input/index.vue";
+import { LayIcon } from "@layui/icons-vue";
+import layButton from "../button/index.vue";
+import { ref, watch, withDefaults, computed, Ref } from "vue";
+import { InputNumberSize } from "./interface";
+import { add, sub } from "./math";
+
+export interface InputNumberProps {
+  modelValue?: number;
+  name?: string;
+  disabled?: boolean;
+  disabledInput?: boolean;
+  size?: InputNumberSize;
+  step?: number;
+  position?: "right";
+  min?: number;
+  max?: number;
+}
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  disabled: false,
+  disabledInput: false,
+  modelValue: 0,
+  step: 1,
+  min: -Infinity,
+  max: Infinity,
+  size: "md",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+let num: Ref<number> = ref(props.modelValue);
+
+watch(num, (val) => {
+  if (props.max !== Infinity && val > props.max) {
+    num.value = props.max;
+    return;
+  }
+  if (props.min !== -Infinity && val < props.min) {
+    num.value = props.min;
+    return;
+  }
+  if (isNumber(num.value)) {
+    tempValue.value = Number(num.value);
+    emit("update:modelValue", tempValue.value);
+    emit("change", tempValue.value);
+  }
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val !== num.value) {
+      num.value = props.modelValue;
+    }
+  }
+);
+
+let timer: any = 0;
+const tempValue: Ref<number> = ref(0);
+
+const minControl = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (props.min !== -Infinity) {
+    return Number(props.min) >= num.value;
+  }
+});
+
+const maxControl = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (props.max !== Infinity) {
+    return Number(props.max) <= num.value;
+  }
+});
+
+const addition = function () {
+  num.value = add(num.value, props.step);
+};
+
+const subtraction = function () {
+  num.value = sub(num.value, props.step);
+};
+
+const longDown = function (fn: Function) {
+  cancelLongDown();
+  if (props.disabled) {
+    return;
+  }
+  timer = setInterval(() => fn.call(timer), 150);
+  fn.call(timer);
+};
+
+const cancelLongDown = function () {
+  clearInterval(timer);
+};
+
+const inputChange = function () {
+  if (isNumber(num.value)) {
+    tempValue.value = Number(num.value);
+    return;
+  }
+  num.value = tempValue.value;
+};
+
+const isNumber = function (num: any) {
+  return !isNaN(num);
+};
+</script>
+
+<template>
+  <div class="layui-input-number" :position="position" :size="size">
+    <lay-button
+      size="lg"
+      @mouseup="cancelLongDown"
+      @mousedown="longDown(subtraction)"
+      @blur="cancelLongDown"
+      :disabled="minControl"
+      class="layui-control-btn layui-subtraction-btn"
+    >
+      <lay-icon
+        :type="
+          position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
+        "
+      />
+    </lay-button>
+    <div class="layui-input-number-input">
+      <lay-input
+        :max="max"
+        :min="min"
+        :name="name"
+        v-model="num"
+        :readonly="disabledInput || disabled"
+        :disabled="disabledInput || disabled"
+        @input="inputChange"
+        type="number"
+      />
+    </div>
+    <lay-button
+      size="lg"
+      @mouseup="cancelLongDown"
+      @mousedown="longDown(addition)"
+      @blur="cancelLongDown"
+      :disabled="maxControl"
+      class="layui-control-btn layui-addition-btn"
+    >
+      <lay-icon
+        :type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
+      />
+    </lay-button>
+  </div>
+</template>

src/component/inputNumber/interface.ts

@@ -0,0 +1 @@
+export type InputNumberSize = "lg" | "md" | "sm" | "xs";

src/component/inputNumber/math.ts

@@ -0,0 +1,61 @@
+//加法
+function add(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 + arg2) / m;
+}
+//减法
+function sub(arg1: number, arg2: number) {
+  var r1, r2, m, c;
+  try {
+    r1 = arg1.toString().split(".")[1].length;
+  } catch (e) {
+    r1 = 0;
+  }
+  try {
+    r2 = arg2.toString().split(".")[1].length;
+  } catch (e) {
+    r2 = 0;
+  }
+  c = Math.abs(r1 - r2);
+  m = Math.pow(10, Math.max(r1, r2));
+  if (c > 0) {
+    var cm = Math.pow(10, c);
+    if (r1 > r2) {
+      arg1 = Number(arg1.toString().replace(".", ""));
+      arg2 = Number(arg2.toString().replace(".", "")) * cm;
+    } else {
+      arg1 = Number(arg1.toString().replace(".", "")) * cm;
+      arg2 = Number(arg2.toString().replace(".", ""));
+    }
+  } else {
+    arg1 = Number(arg1.toString().replace(".", ""));
+    arg2 = Number(arg2.toString().replace(".", ""));
+  }
+  return (arg1 - arg2) / m;
+}
+export { add, sub };