u

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

@@ -1,59 +1,113 @@
 import type { PropType } from 'vue'
-import { computed, defineComponent, h, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon'
 
 export default defineComponent({
   name: 'AInput',
   props: {
+    modelValue: String,
     size: {
       type: String as PropType<'small' | 'medium' | 'large'>,
       default: 'medium',
     },
+    align: {
+      type: String as PropType<'left' | 'center' | 'right'>,
+      default: 'left',
+    },
     placeholder: String,
     disabled: Boolean,
+    readonly: Boolean,
+    clearable: Boolean,
     prefixIcon: String,
     suffixIcon: String,
+    showCount: Boolean,
+    maxlength: Number,
+    password: Boolean,
   },
-  setup(props, { slots }) {
-    const inputRef = ref<HTMLInputElement | null>(null)
+  emits: ['update:modelValue'],
+  setup(props, { slots, emit }) {
     const prefixCls = getPrefixCls('input')
+    const inputValue = ref(props.modelValue || '')
 
-    const wrapperCls = computed(() => [
-      `${prefixCls}-wrapper`,
-      `${prefixCls}-wrapper-${props.size}`,
-      { [`${prefixCls}-wrapper-disabled`]: props.disabled },
-    ])
+    // 控制密码显示/隐藏
+    const showPassword = ref(false)
 
-    const iconSizeMap: Record<string, number> = { small: 12, medium: 14, large: 16 }
-
-    const renderIcon = (slot: any, iconProp?: string) => {
-      if (slot)
-        return typeof slot === 'function' ? slot() : slot
-      if (iconProp)
-        return h(Icon, { icon: iconProp, width: iconSizeMap[props.size], height: iconSizeMap[props.size] })
-      return null
+    const updateValue = (val: string) => {
+      if (props.maxlength)
+        val = val.slice(0, props.maxlength)
+      inputValue.value = val
+      emit('update:modelValue', val)
     }
 
+    const countText = computed(() => {
+      const len = inputValue.value.length
+      return props.maxlength ? `${len} / ${props.maxlength}` : `${len}`
+    })
+
+    const inputType = computed(() => {
+      if (!props.password)
+        return 'text'
+      return showPassword.value ? 'text' : 'password'
+    })
+
     return () => (
-      <div class={wrapperCls.value}>
+      <div
+        class={[
+          `${prefixCls}-wrapper`,
+          `${prefixCls}-size-${props.size}`,
+          props.disabled && `${prefixCls}-disabled`,
+          props.readonly && `${prefixCls}-readonly`,
+        ]}
+      >
         {(slots.prefix || props.prefixIcon) && (
-          <span class={`${prefixCls}-icon`}>
-            {renderIcon(slots.prefix, props.prefixIcon)}
-          </span>
+          <div class={`${prefixCls}-prefix`}>
+            {slots.prefix?.() ?? <Icon icon={props.prefixIcon!} size={14} />}
+          </div>
         )}
 
         <input
-          ref={inputRef}
-          class={`${prefixCls}-inner`}
+          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)}
         />
 
-        {(slots.suffix || props.suffixIcon) && (
-          <span class={`${prefixCls}-icon`}>
-            {renderIcon(slots.suffix, props.suffixIcon)}
-          </span>
+        {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('')}
+          />
+        )}
+
+        {/* 密码切换图标 */}
+        {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>
+        )}
+
+        {(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>
     )