✨ 新增input-number(数字输入框)、tooltip(文字提示)、修改input组件可接受number类型值

src/module/inputNumber/index.less

@@ -0,0 +1,120 @@
+@border-color: #cacaca;
+@hover-border-color: #1E9FFF;
+@lg: 40px;
+@lg-wdith: 200px;
+@lg-right: 20px;
+@md: 32px;
+@md-wdith: 160px;
+@md-right: 16px;
+@sm: 28px;
+@sm-wdith: 140px;
+@sm-right: 14px;
+@xs: 24px;
+@xs-wdith: 120px;
+@xs-right: 12px;
+
+.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;
+    }
+    &[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{
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px solid @border-color;
+  border-color: @border-color;
+  border-radius: 3px;
+  overflow: hidden;
+  .set-size(@lg-wdith, @lg, @lg-right);
+  margin-left: 5px;
+  &:hover {
+    border-color: @hover-border-color;
+  }
+  .layui-input{
+    text-align: center;
+    border: 0;
+  }
+  .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;
+    }
+  }
+  /* 谷歌--去掉自带的控制按钮 */
+  input.layui-input::-webkit-outer-spin-button,
+  input.layui-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  /* 火狐--去掉自带的控制按钮 */
+  input.layui-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=md] {
+    .set-size(@md-wdith,@md, @md-right)
+  }
+
+  &[size=sm] {
+    .set-size(@sm-wdith, @sm, @sm-right)
+  }
+
+  &[size=xs] {
+    .set-size(@xs-wdith, @xs, @xs-right)
+  }
+
+}

src/module/inputNumber/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayInputNumber', Component)
+}
+
+export default Component as IDefineComponent

src/module/inputNumber/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="layui-input-number" :position="position" :size="size">
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(subtraction)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="minControl"
+      class="layui-control-btn layui-subtraction-btn"
+    >
+      <lay-icon :type="position==='right' ? 'layui-icon-down' : 'layui-icon-subtraction'"></lay-icon>
+    </lay-button>
+    <div class="layui-input-number-input">
+      <lay-input
+        v-model="num"
+        :readonly="disabledInput || disabled"
+        type="number"
+        :name="name"
+        @change="inputChange"
+      ></lay-input>
+    </div>
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(addition)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="maxControl"
+      class="layui-control-btn layui-addition-btn"
+    >
+      <lay-icon :type="position==='right' ? 'layui-icon-up' : 'layui-icon-addition'"></lay-icon>
+    </lay-button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: "LayInputNumber",
+  };
+</script>
+
+<script setup lang="ts">
+import layButton from "../button/index";
+import layIcon from "../icon/index";
+import layInput from "../input/index";
+import "./index.less";
+import {
+  defineProps,
+  defineEmits,
+  ref,
+  watch,
+  withDefaults,
+  computed,
+} from "vue";
+
+export interface LayInputNumberProps {
+  modelValue?: number;
+  name?: string;
+  disabled?: boolean;
+  disabledInput?: boolean;
+  step?: number;
+  position?: "right";
+  min?: number;
+  max?: number;
+  size?: "md" | "sm" | "xs";
+}
+
+const props = withDefaults(defineProps<LayInputNumberProps>(), {
+  disabled: false,
+  disabledInput: false,
+  modelValue: 0,
+  step: 1,
+  min: -Infinity,
+  max: Infinity,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+let num = 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;
+  }
+});
+const tempValue = ref(0);
+let timer: any = 0;
+
+const minControl = computed(
+  () => props.min !== -Infinity && Number(props.min) >= num.value
+);
+const maxControl = computed(
+  () => props.max !== Infinity && Number(props.max) <= num.value
+);
+
+const addition = function () {
+  num.value += Number(props.step);
+};
+
+const subtraction = function () {
+  num.value -= Number(props.step);
+};
+
+const longDown = function (fn: Function) {
+  cancelLongDown();
+  if (props.disabled) {
+    return;
+  }
+  timer = setInterval(() => fn.call(timer), 100);
+  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 /^\d+(\.\d+)?$/.test(num);
+};
+</script>