!310 feat(inputNumber): 新增indicator属性

SpikeMeow · jevin98 · commit c7d3add3ccb7 · 2024-05-06T09:54:45.000Z
* 在输入框上新增 title 属性，用来显示长文本
* 修复疏漏，isBlur默认为 true
* 1.inputType变量命名改为isBlur。
* feat(layui-vue): inputNumber 支持显示后缀
diff --git a/docs/document-component/src/document/zh-CN/components/inputNumber.md b/docs/document-component/src/document/zh-CN/components/inputNumber.md
@@ -136,13 +136,15 @@
 
 :::
 
-::: title 精度
+::: title 精度与后缀
 :::
 
-::: demo `precision` 设置 precision 属性可以控制数值精度，接收一个 Number。
+::: demo `precision` 设置 precision 属性可以控制数值精度，接收一个 Number。可以同时使用 `indicator` 设置一个后缀。
 
 <template>
   <lay-input-number v-model="data12" :precision="2" :step="0.1" :max="10"></lay-input-number>
+  <lay-input-number v-model="data12" :precision="2" :step="0.1" :max="10" indicator="%"></lay-input-number>
+  <lay-input-number v-model="data12" :precision="2" :step="0.1" :max="10" indicator="时" position="right"></lay-input-number>
 </template>
 
 <script>
@@ -208,6 +210,7 @@
 | min     | 最小可输入的数 | `number` | --     |
 | max     | 最大可输入的数 | `number` | --     |
 | size     | 尺寸, 可选值`md` / `sm` / `xs`| `string` | 默认为最大尺寸   |
+| indicator | 后缀标识 | `string` | --     |
 
 :::
 
diff --git a/packages/component/src/component/inputNumber/index.less b/packages/component/src/component/inputNumber/index.less
@@ -22,6 +22,18 @@
     height: @size;
     width: @width;
 
+    .layui-input-number-indicator {
+      pointer-events: none;
+      position: absolute;
+      height: 100%;
+      top: 0;
+      line-height: @size;
+      text-align: center;
+      background-color: #fff;
+      width: @width;
+      overflow: hidden;
+    }
+
     .layui-input {
       height: @size;
       line-height: @size;
@@ -45,6 +57,11 @@
         line-height: @right-size;
       }
 
+      .layui-input-number-indicator {
+        left: 0;
+        width: calc(@width - @right-size - calc(@size / 2));
+      }
+
       .layui-subtraction-btn {
         top: @right-size - 1;
       }
diff --git a/packages/component/src/component/inputNumber/index.vue b/packages/component/src/component/inputNumber/index.vue
@@ -21,6 +21,7 @@ export interface InputNumberProps {
   position?: "right";
   min?: number;
   max?: number;
+  indicator?: string;
 }
 
 defineOptions({
@@ -35,9 +36,11 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
   stepStrictly: false,
   min: -Infinity,
   max: Infinity,
+  indicator: "",
 });
 
 const { size } = useProps(props);
+const isBlur = ref(true);
 
 const emit = defineEmits([
   "update:modelValue",
@@ -201,10 +204,12 @@ const onChange = (value: string) => {
 
 const onBlur = (event: FocusEvent) => {
   emit("blur", event);
+  isBlur.value = true;
 };
 
 const onFocus = (event: FocusEvent) => {
   emit("focus", event);
+  isBlur.value = false;
 };
 
 const addition = () => {
@@ -262,6 +267,7 @@ const maxDisabled = computed(() => {
     </lay-button>
     <div class="layui-input-number-input">
       <lay-input
+        :title="`${inputValue}${indicator}`"
         :max="max"
         :min="min"
         :name="name"
@@ -274,6 +280,12 @@ const maxDisabled = computed(() => {
         @focus="onFocus"
         type="number"
       />
+      <div
+        class="layui-input-number-indicator"
+        v-if="isBlur && !!indicator"
+      >
+        {{ `${inputValue}${indicator}` }}
+      </div>
     </div>
     <lay-button
       size="lg"
