From 794dbb77fd9ea9a10f3add6f202f0e32a190655d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 22 Mar 2022 15:14:10 +0800
Subject: [PATCH] feat: add input suffix prefix slot

---
 example/docs/zh-CN/components/input.md | 27 ++++++++++++++++++
 example/docs/zh-CN/guide/changelog.md  |  2 ++
 src/component/input/index.less         | 33 ++++++++++++++++------
 src/component/input/index.vue          | 34 +++++++++++++++--------
 src/theme/index.less                   | 38 --------------------------
 5 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
index 4566fb3a..716e7dbc 100644
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -56,6 +56,33 @@ export default {
 
 :::
 
+
+::: title 前缀后缀
+:::
+
+::: demo
+
+<template>
+  <lay-input>
+    <template #prefix>0</template>
+    <template #suffix>0</template>
+  </lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 事件回调
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 2bba2c90..15be1fea 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -16,6 +16,8 @@
       <li> 
         <h3>0.4.1 <span class="layui-badge-rim">2022-03-17</span></h3> 
         <ul>
+          <li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
+          <li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
           <li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
           <li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
         </ul> 
diff --git a/src/component/input/index.less b/src/component/input/index.less
index 4b5fc4fa..0f1a020c 100644
--- a/src/component/input/index.less
+++ b/src/component/input/index.less
@@ -10,17 +10,34 @@
 
 .layui-input {
   height: 38px;
-  line-height: 1.3;
-  line-height: 38px\9;
-  border-width: 1px;
-  border-style: solid;
+  line-height: 38px;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.85);
-  border-radius: @input-border-radius;
-  border-color: @input-border-color;
-  display: block;
-  width: 100%;
   padding-left: 10px;
+  display: inline-block;
+  border: none;
+  width: 100%;
+}
+
+.layui-input-wrapper {
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-flex;
+  border-color: @input-border-color;
+  border-radius:  @input-border-radius;
+}
+
+.layui-input-prefix {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.layui-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
 }
 
 .layui-input:hover {
diff --git a/src/component/input/index.vue b/src/component/input/index.vue
index 3cde4278..a49f16f9 100644
--- a/src/component/input/index.vue
+++ b/src/component/input/index.vue
@@ -7,8 +7,10 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { useI18n } from "vue-i18n";
+import { useSlots } from "vue-demi";
 
 const { t } = useI18n();
+const slots = useSlots();
 
 export interface LayInputProps {
   name?: string;
@@ -39,16 +41,24 @@ const onBlur = function () {
 </script>
 
 <template>
-  <input
-    :type="type"
-    :name="name"
-    :value="modelValue || value"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :class="{ 'layui-disabled': disabled }"
-    class="layui-input"
-    @input="onInput"
-    @focus="onFocus"
-    @blur="onBlur"
-  />
+  <div class="layui-input-wrapper">
+    <span class="layui-input-prefix" v-if="slots.prefix">
+      <slot name="prefix"></slot>
+    </span>
+    <input
+      :type="type"
+      :name="name"
+      :value="modelValue || value"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :class="{ 'layui-disabled': disabled }"
+      class="layui-input"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <span class="layui-input-suffix" v-if="slots.suffix">
+      <slot name="suffix"></slot>
+    </span>
+  </div>
 </template>
diff --git a/src/theme/index.less b/src/theme/index.less
index 87779c59..7f1cc978 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -672,49 +672,11 @@ a cite {
   padding-left: 35px;
 }
 
-.layui-input-prefix,
-.layui-input-split,
-.layui-input-suffix {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0 10px;
-  width: 35px;
-  height: 100%;
-  text-align: center;
-  transition: all 0.3s;
-  cursor: pointer;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
-.layui-input-prefix {
-  left: 0;
-  border-radius: 2px 0 0 2px;
-}
-
-.layui-input-suffix {
-  right: 0;
-  border-radius: 0 2px 2px 0;
-}
 
 .layui-input-wrap .layui-input:focus + .layui-input-split {
   border-color: @global-neutral-color-6;
 }
 
-.layui-input-prefix .layui-icon,
-.layui-input-split .layui-icon,
-.layui-input-suffix .layui-icon {
-  position: relative;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.6);
-  transition: all 0.3s;
-}
-
-.layui-input-wrap .layui-input-prefix.layui-input-split {
-  border-width: 0 1px 0 0;
-}
-
 .layui-input-wrap-prefix .layui-form-select {
   position: static;
 }