feat(input): 优化 clearable 按钮显示逻辑 (#1535)

* feat(input): 优化 `clearable` 按钮显示逻辑区分 `password` 输入框 * fix: 扩大类型 * fix: class
Tencent · Aug 30, 2022 · 69e683f · 69e683f
1 parent 13f2eaa
commit 69e683f
Showing 1 changed file with 31 additions and 13 deletions.
diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -101,7 +101,7 @@ export default defineComponent({
     return () => {
       const prefixIcon = renderTNodeJSX('prefixIcon');
       let suffixIcon = renderTNodeJSX('suffixIcon');
-      let clearIcon = renderTNodeJSX('clearIcon');
+      let passwordIcon = renderTNodeJSX('passwordIcon');
       const label = renderTNodeJSX('label', { silent: true });
       const suffix = renderTNodeJSX('suffix');
       const limitNode =
@@ -131,14 +131,26 @@ export default defineComponent({
       }
 
       if (showClear.value) {
-        clearIcon = (
-          <CloseCircleFilledIcon
-            ref={inputHandle.clearIconRef}
-            class={`${COMPONENT_NAME.value}__suffix-clear`}
-            onClick={inputHandle.emitClear}
-            onMousedown={inputHandle.onClearIconMousedown}
-          />
-        );
+        // 如果类型为 password 则使用 passwordIcon 显示 clear
+        if (renderType.value === 'password') {
+          passwordIcon = (
+            <CloseCircleFilledIcon
+              ref={inputHandle.clearIconRef}
+              class={`${COMPONENT_NAME.value}__suffix-clear`}
+              onClick={inputHandle.emitClear}
+              onMousedown={inputHandle.onClearIconMousedown}
+            />
+          );
+        } else {
+          suffixIcon = (
+            <CloseCircleFilledIcon
+              ref={inputHandle.clearIconRef}
+              class={`${COMPONENT_NAME.value}__suffix-clear`}
+              onClick={inputHandle.emitClear}
+              onMousedown={inputHandle.onClearIconMousedown}
+            />
+          );
+        }
       }
 
       const classes = [
@@ -202,19 +214,25 @@ export default defineComponent({
               </span>
             )}
             {suffixContent}
-            {clearIcon ? (
+            {passwordIcon ? (
               <span
                 class={[
                   `${COMPONENT_NAME.value}__suffix`,
                   `${COMPONENT_NAME.value}__suffix-icon`,
-                  { [`${COMPONENT_NAME.value}__clear`]: showClear.value },
+                  `${COMPONENT_NAME.value}__clear`,
                 ]}
               >
-                {clearIcon}
+                {passwordIcon}
               </span>
             ) : null}
             {suffixIcon ? (
-              <span class={[`${COMPONENT_NAME.value}__suffix`, `${COMPONENT_NAME.value}__suffix-icon`]}>
+              <span
+                class={[
+                  `${COMPONENT_NAME.value}__suffix`,
+                  `${COMPONENT_NAME.value}__suffix-icon`,
+                  { [`${COMPONENT_NAME.value}__clear`]: showClear.value },
+                ]}
+              >
                 {suffixIcon}
               </span>
             ) : null}