✨(component): 新增 input 组件 prepend append 插槽

package/component/src/component/affix/index.vue

@@ -10,12 +10,13 @@ export default {
 </script>
 <script setup lang="ts">
 import "./index.less";
-import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
+import { ref, onMounted, onUnmounted, nextTick, computed, reactive } from "vue";
 export interface LayAiffxProps {
   offset?: number;
   target?: HTMLElement;
   position?: string;
 }
+
 const props = withDefaults(defineProps<LayAiffxProps>(), {
   offset: 0,
   position: "top",

package/component/src/component/input/index.less

@@ -3,7 +3,19 @@
   --input-border-color: var(--global-neutral-color-3);
 }
 
+
 .layui-input {
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  display: inline-flex;
+}
+
+.layui-input input{
   height: 38px;
   line-height: 38px;
   background-color: #fff;
@@ -11,22 +23,36 @@
   padding-left: 10px;
   display: inline-block;
   border: none;
+  height: 100%;
   width: 100%;
 }
 
+.layui-input-append {
+  background-color: #fafafa;
+  border-left: 1px solid var(--input-border-color);
+  display: flex;
+  padding: 0 15px;
+  flex: none;
+  align-items: center;
+}
+
+.layui-input-prepend {
+  background-color: #fafafa;
+  border-right: 1px solid var(--input-border-color);
+  display: flex;
+  padding: 0 15px;
+  flex: none;
+  align-items: center;
+}
+
 .layui-input-wrapper {
   width: 100%;
-  height: 38px;
-  line-height: 38px;
-  border-width: 1px;
-  border-style: solid;
   display: inline-flex;
-  border-color: var(--input-border-color);
-  border-radius: var(--input-border-radius);
+  border: none;
 }
 
-.layui-input-wrapper:hover,
-.layui-input-wrapper:focus-within {
+.layui-input:hover,
+.layui-input:focus-within {
   border-color: #d2d2d2 !important;
 }
 
@@ -34,18 +60,14 @@
   display: flex;
   flex: none;
   align-items: center;
+  padding: 0 15px;
 }
 
 .layui-input-suffix {
   display: flex;
   flex: none;
   align-items: center;
-}
-
-.layui-input-prefix-icon,
-.layui-input-suffix-icon {
-  width: 38px;
-  text-align: center;
+  padding: 0 15px;
 }
 
 .layui-input-clear {
@@ -56,6 +78,6 @@
   color: rgba(0, 0, 0, 0.45);
 }
 
-.layui-input::-webkit-input-placeholder {
+.layui-input input::-webkit-input-placeholder {
   line-height: 1.3;
 }

package/component/src/component/input/index.vue

@@ -96,41 +96,50 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <div class="layui-input-wrapper">
-    <span class="layui-input-prefix" v-if="slots.prefix || props.prefixIcon">
-      <slot name="prefix" v-if="slots.prefix"></slot>
-      <lay-icon
-        v-else
-        :type="props.prefixIcon"
-        class="layui-input-prefix-icon"
-      ></lay-icon>
-    </span>
-    <input
-      :type="type"
-      :name="name"
-      :disabled="disabled"
-      :value="currentValue"
-      :placeholder="placeholder"
-      :autofocus="autofocus"
-      :autocomplete="autocomplete"
-      :readonly="readonly"
-      :class="classes"
-      class="layui-input"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-      @change="onChange"
-    />
-    <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
-      <slot name="suffix" v-if="slots.suffix"></slot>
-      <lay-icon
-        v-else
-        :type="props.suffixIcon"
-        class="layui-input-suffix-icon"
-      ></lay-icon>
-    </span>
-    <span class="layui-input-clear" v-if="allowClear && hasContent">
-      <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
-    </span>
+  <div
+    class="layui-input"
+  >
+    <div class="layui-input-prepend" v-if="slots.prepend">
+      <slot name="prepend"></slot>
+    </div>
+    <div class="layui-input-wrapper">
+      <span class="layui-input-prefix" v-if="slots.prefix || props.prefixIcon">
+        <slot name="prefix" v-if="slots.prefix"></slot>
+        <lay-icon
+          v-else
+          :type="props.prefixIcon"
+          class="layui-input-prefix-icon"
+        ></lay-icon>
+      </span>
+      <input
+        :type="type"
+        :name="name"
+        :disabled="disabled"
+        :value="currentValue"
+        :placeholder="placeholder"
+        :autofocus="autofocus"
+        :autocomplete="autocomplete"
+        :readonly="readonly"
+        :class="classes"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @change="onChange"
+      />
+      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
+        <slot name="suffix" v-if="slots.suffix"></slot>
+        <lay-icon
+          v-else
+          :type="props.suffixIcon"
+          class="layui-input-suffix-icon"
+        ></lay-icon>
+      </span>
+      <span class="layui-input-clear" v-if="allowClear && hasContent">
+        <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
+      </span>
+    </div>
+    <div class="layui-input-append" v-if="slots.append">
+      <slot name="append"></slot>
+    </div>
   </div>
 </template>

package/document-component/src/document/zh-CN/components/input.md

@@ -83,6 +83,32 @@ export default {
 
 :::
 
+::: title 拼接内容
+:::
+
+::: demo
+
+<template>
+  <lay-input>
+    <template #prepend>0</template>
+    <template #append>0</template>
+  </lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 设置图标
 :::