u

code/base-project/base-vue/packages/ao-design/src/input/index.tsx

@@ -4,7 +4,7 @@ import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon'
 
 export default defineComponent({
-  name: 'AInput',
+  name: 'Input',
   props: {
     modelValue: String,
     size: {
@@ -24,6 +24,8 @@ export default defineComponent({
     showCount: Boolean,
     maxlength: Number,
     password: Boolean,
+    prepend: String,
+    append: String,
   },
   emits: ['update:modelValue'],
   setup(props, { slots, emit }) {
@@ -51,65 +53,89 @@ export default defineComponent({
       return showPassword.value ? 'text' : 'password'
     })
 
-    return () => (
-      <div
-        class={[
-          `${prefixCls}-wrapper`,
-          `${prefixCls}-size-${props.size}`,
-          props.disabled && `${prefixCls}-disabled`,
-          props.readonly && `${prefixCls}-readonly`,
-        ]}
-      >
-        {(slots.prefix || props.prefixIcon) && (
-          <div class={`${prefixCls}-prefix`}>
-            {slots.prefix?.() ?? <Icon icon={props.prefixIcon!} size={14} />}
-          </div>
-        )}
+    const inputWrapper = () => {
+      return (
+        <div
+          class={[
+            `${prefixCls}-wrapper`,
+            props.disabled && `${prefixCls}-disabled`,
+            props.readonly && `${prefixCls}-readonly`,
+          ]}
+        >
+          {(slots.prefix || props.prefixIcon) && (
+            <div class={`${prefixCls}-prefix`}>
+              {slots.prefix?.() ?? <Icon icon={props.prefixIcon!} size={14} />}
+            </div>
+          )}
 
-        <input
-          class={`${prefixCls}-input ${prefixCls}-align-${props.align}`}
-          type={inputType.value}
-          value={inputValue.value}
-          placeholder={props.placeholder}
-          disabled={props.disabled}
-          readonly={props.readonly}
-          onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
-        />
-
-        {props.clearable && inputValue.value && !props.disabled && !props.readonly && (
-          <Icon
-            icon="streamline:interface-delete-circle-button-delete-remove-add-circle-buttons"
-            class={`${prefixCls}-clear`}
-            onClick={() => updateValue('')}
+          <input
+            class={`${prefixCls}-input ${prefixCls}-align-${props.align}`}
+            type={inputType.value}
+            value={inputValue.value}
+            placeholder={props.placeholder}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
           />
-        )}
 
-        {/* 密码切换图标 */}
-        {props.password && (
-          <div class={`${prefixCls}-password-toggle`}>
-            <Icon
-              icon="mdi:eye"
-              class={{ hidden: showPassword.value }}
-              onClick={() => (showPassword.value = true)}
-            />
-            <Icon
-              icon="mdi:eye-off"
-              class={{ hidden: !showPassword.value }}
-              onClick={() => (showPassword.value = false)}
-            />
-          </div>
-        )}
+          {props.clearable && inputValue.value && !props.disabled && !props.readonly && (
+            <span
+              class={`${prefixCls}-suffix`}
+              onClick={() => updateValue('')}
+            >
+              <Icon
+                class={`${prefixCls}-clear`}
+                icon="material-symbols:cancel-outline-rounded"
+              />
+            </span>
 
-        {(slots.suffix || props.suffixIcon) && !props.password && (
-          <div class={`${prefixCls}-suffix`}>
-            {slots.suffix?.() ?? <Icon icon={props.suffixIcon!} size={14} />}
-          </div>
-        )}
+          )}
 
-        {props.showCount && (
-          <span class={`${prefixCls}-count`}>{countText.value}</span>
-        )}
-      </div>
-    )
+          {/* 密码切换图标 */}
+          {props.password && (
+            <span
+              class={`${prefixCls}-suffix`}
+              onClick={() => (showPassword.value = !showPassword.value)}
+            >
+              <Icon icon={showPassword.value ? 'mage:eye-off' : 'mage:eye'} class={`${prefixCls}-password`} />
+            </span>
+          )}
+
+          {(slots.suffix || props.suffixIcon) && !props.password && (
+            <div class={`${prefixCls}-suffix`}>
+              {slots.suffix?.() ?? <Icon icon={props.suffixIcon!} size={14} />}
+            </div>
+          )}
+
+          {props.showCount && (
+            <span class={`${prefixCls}-count`}>{countText.value}</span>
+          )}
+        </div>
+      )
+    }
+
+    return () => {
+      return (
+        <div class={`${prefixCls}-adornment ${prefixCls}-size-${props.size}`}>
+          {props.prepend || slots.prepend
+            ? (
+                <div class={`${prefixCls}-adornment-prepend`}>
+                  {slots.prepend?.() ?? (props.prepend && <span>{props.prepend}</span>)}
+                </div>
+              )
+            : null}
+
+          {inputWrapper()}
+
+          {props.append || slots.append
+            ? (
+                <div class={`${prefixCls}-adornment-append`}>
+                  {slots.append?.() ?? (props.append && <span>{props.append}</span>)}
+                </div>
+              )
+            : null}
+        </div>
+      )
+    }
   },
 })