✨(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,6 +96,12 @@ const classes = computed(() => {
 </script>
 
 <template>
+  <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>
@@ -115,7 +121,6 @@ const classes = computed(() => {
         :autocomplete="autocomplete"
         :readonly="readonly"
         :class="classes"
-      class="layui-input"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -133,4 +138,8 @@ const classes = computed(() => {
         <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 设置图标
 :::