✨(input): 新增 prefix-icon 与 suffix-icon 属性

更新文档

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

@@ -22,7 +22,7 @@
   border-style: solid;
   display: inline-flex;
   border-color: var(--input-border-color);
-  border-radius:  var(--input-border-radius);
+  border-radius: var(--input-border-radius);
 }
 
 .layui-input-wrapper:focus-within {
@@ -33,7 +33,6 @@
   display: flex;
   flex: none;
   align-items: center;
-  padding-left: 8px;
 }
 
 .layui-input-suffix {
@@ -42,12 +41,18 @@
   align-items: center;
 }
 
+.layui-input-prefix-icon,
+.layui-input-suffix-icon {
+  width: 38px;
+  text-align: center;
+}
+
 .layui-input-clear {
   flex: none;
   display: flex;
   align-items: center;
   padding-right: 10px;
-  color: rgba(0, 0, 0, 0.45)
+  color: rgba(0, 0, 0, 0.45);
 }
 
 .layui-input:hover {
@@ -60,4 +65,4 @@
 
 .layui-input::-webkit-input-placeholder {
   line-height: 1.3;
-}
+}

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

@@ -21,6 +21,8 @@ export interface LayInputProps {
   allowClear?: boolean;
   autofocus?: boolean;
   autocomplete?: string;
+  prefixIcon?: string;
+  suffixIcon?: string;
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {
@@ -74,8 +76,9 @@ const classes = computed(() => {
 
 <template>
   <div class="layui-input-wrapper">
-    <span class="layui-input-prefix" v-if="slots.prefix">
-      <slot name="prefix"></slot>
+    <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"
@@ -93,8 +96,9 @@ const classes = computed(() => {
       @blur="onBlur"
       @change="onChange"
     />
-    <span class="layui-input-suffix" v-if="slots.suffix">
-      <slot name="suffix"></slot>
+    <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="onClear"></lay-icon>

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

@@ -83,6 +83,30 @@ export default {
 
 :::
 
+::: title 设置图标
+:::
+
+::: demo
+
+<template>
+  <lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
+  </lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 允许清空
 :::