u

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

@@ -0,0 +1,7 @@
+@use '../_styles/theme/index' as *;
+
+$input-prefix: #{$prefix}-input;
+
+.#{$input-prefix} {
+  border-color: #d9d9d9;
+}

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

@@ -1,63 +1,23 @@
-import type { PropType } from 'vue'
-import { computed, defineComponent, ref, toRefs } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
-  name: 'Input',
-  props: {
-    modelValue: { type: String, default: '' },
-    placeholder: { type: String, default: '' },
-    type: { type: String as PropType<'text' | 'password' | 'number'>, default: 'text' },
-    disabled: { type: Boolean, default: false },
-    clearable: { type: Boolean, default: false },
-  },
-  emits: ['update:modelValue', 'change', 'focus', 'blur'],
-  setup(props, { emit }) {
+  name: 'AInput',
+  setup() {
     const inputRef = ref<HTMLInputElement | null>(null)
 
-    const handleInput = (e: Event) => {
-      const value = (e.target as HTMLInputElement).value
-      emit('update:modelValue', value)
-      emit('change', value)
-    }
-
-    const handleClear = () => {
-      emit('update:modelValue', '')
-      inputRef.value?.focus()
-      emit('change', '')
-    }
-
-    const showClear = computed(() => props.clearable && !!props.modelValue && !props.disabled)
+    // 使用统一前缀
+    const prefixCls = getPrefixCls('input')
+    const cls = computed(() => [prefixCls])
 
     return () => (
-      <div class="a-input-wrapper" style={{ position: 'relative', display: 'inline-block' }}>
+      <div class={`${prefixCls}-wrapper`} style={{ display: 'inline-block' }}>
         <input
           ref={inputRef}
-          class="a-input"
-          type={props.type}
-          placeholder={props.placeholder}
-          value={props.modelValue}
-          disabled={props.disabled}
-          onInput={handleInput}
-          onFocus={e => emit('focus', e)}
-          onBlur={e => emit('blur', e)}
-          style={{ paddingRight: showClear.value ? '24px' : '8px' }}
+          class={cls.value}
+          type="text"
+          placeholder="请输入"
         />
-        {showClear.value && (
-          <span
-            class="a-input-clear"
-            onClick={handleClear}
-            style={{
-              position: 'absolute',
-              right: '4px',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              cursor: 'pointer',
-              fontSize: '12px',
-            }}
-          >
-            ×
-          </span>
-        )}
       </div>
     )
   },