From 9dd0ea76b5150a19bd315ba6d878206371b3b9e0 Mon Sep 17 00:00:00 2001
From: Aisen <zhengliming@imlianai.com>
Date: Fri, 21 Jun 2024 19:01:05 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20input=20=E5=B7=A6=E8=BE=B9=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=EF=BC=8C=E6=96=B0=E5=A2=9E2=E4=B8=AAprop=EF=BC=9Aleft?=
 =?UTF-8?q?Icon=20=E5=B7=A6=E8=BE=B9=E5=9B=BE=E6=A0=87=E3=80=81showLeftIco?=
 =?UTF-8?q?n=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=E5=B7=A6=E8=BE=B9?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=EF=BC=8CleftClick=EF=BC=9A=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=B7=A6=E8=BE=B9=E7=9A=84=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tuniao-ui/components/tn-input/tn-input.vue | 49 +++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/tuniao-ui/components/tn-input/tn-input.vue b/tuniao-ui/components/tn-input/tn-input.vue
index 13a21bd..6ad4349 100644
--- a/tuniao-ui/components/tn-input/tn-input.vue
+++ b/tuniao-ui/components/tn-input/tn-input.vue
@@ -12,6 +12,12 @@
     }"
     @tap.stop="inputClick"
   >
+    <view
+        v-if="showLeftIcon"
+        class="tn-input__left-icon__item tn-input__left-icon__clear"
+    >
+      <tn-button shape="icon" :scene="scene" :block-time="blockTime" @click="leftIconClick"><view class="icon" :class="[`tn-icon-${leftIcon}`]"></view></tn-button>
+    </view>
     <textarea
       v-if="type === 'textarea'"
       class="tn-input__input tn-input__textarea"
@@ -240,6 +246,16 @@
         type: String,
         default: ''
       },
+      // 是否在输入框内最左边显示图标
+      showLeftIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 最左边图标的名称
+      leftIcon: {
+        type: String,
+        default: ''
+      },
       //场景：debounce ：防抖模式 throttle：节流模式
       scene:{
         type: String,
@@ -309,6 +325,9 @@
       this.$on("on-form-item-error", this.onFormItemError)
     },
     methods: {
+      leftIconClick(){
+        this.$emit('leftClick', this.defaultValue)
+      },
       rightIconClick(){
         this.$emit('rightClick', this.defaultValue)
       },
@@ -428,7 +447,8 @@
     &--error {
       border-color: $tn-color-red !important;
     }
-    
+
+
     &__right-icon {
       line-height: 1;
       .icon {
@@ -457,5 +477,32 @@
         }
       }
     }
+
+    &__left-icon {
+      line-height: 1;
+      &__item {
+        margin-left: 0rpx;
+        margin-top: 4rpx;
+      }
+
+      &__clear {
+        .icon {
+          font-size: 32rpx;
+          color: $tn-font-sub-color;
+        }
+      }
+
+      &__select {
+        transition: transform .4s;
+
+        .icon {
+          font-size: 26rpx;
+        }
+
+        &--reverse {
+          transform: rotate(-180deg);
+        }
+      }
+    }
   }
 </style>