121 lines
4.5 KiB
Plaintext
121 lines
4.5 KiB
Plaintext
<template>
|
|
<div class="au-field" :class="{ 'has-error': error }">
|
|
<div class="au-input" :class="classes">
|
|
<span v-if="$slots.prefix" class="affix prefix"><slot name="prefix" /></span>
|
|
|
|
<input
|
|
ref="input"
|
|
:type="resolvedType"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@input="onInput"
|
|
@focus="$emit('focus', $event)"
|
|
@blur="$emit('blur', $event)"
|
|
>
|
|
|
|
<button
|
|
v-if="clearable && modelValue && !disabled"
|
|
class="action clear"
|
|
type="button"
|
|
aria-label="清除"
|
|
@click="clear"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 6L6 18M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
v-if="type === 'password'"
|
|
class="action toggle"
|
|
type="button"
|
|
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<svg v-if="!showPassword" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22" />
|
|
</svg>
|
|
</button>
|
|
|
|
<span v-if="$slots.suffix" class="affix suffix"><slot name="suffix" /></span>
|
|
</div>
|
|
|
|
<span v-if="error && errorText" class="error-text">{{ errorText }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: [String, Number], default: '' },
|
|
size: { type: String, default: 'default' }, // large | default | small
|
|
type: { type: String, default: 'text' }, // text | password | number ...
|
|
placeholder: { type: String, default: '' },
|
|
disabled: { type: Boolean, default: false },
|
|
error: { type: Boolean, default: false },
|
|
errorText: { type: String, default: '' },
|
|
clearable: { type: Boolean, default: false }
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
|
|
|
|
const sizeMap = { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' };
|
|
const showPassword = ref(false);
|
|
const input = ref(null);
|
|
|
|
const classes = computed(() => [
|
|
sizeMap[props.size],
|
|
{ 'is-error': props.error, 'is-disabled': props.disabled }
|
|
]);
|
|
|
|
const resolvedType = computed(() =>
|
|
props.type === 'password' ? (showPassword.value ? 'text' : 'password') : props.type
|
|
);
|
|
|
|
function onInput(e) {
|
|
emit('update:modelValue', e.target.value);
|
|
}
|
|
|
|
function clear() {
|
|
emit('update:modelValue', '');
|
|
// 清除后重新聚焦
|
|
requestAnimationFrame(() => input.value && input.value.focus());
|
|
}
|
|
</script>
|
|
|
|
<!-- 样式对齐 components.css 与 input.json 契约 -->
|
|
<style scoped>
|
|
.au-field { display: inline-flex; flex-direction: column; gap: 4px; }
|
|
.au-input {
|
|
display: inline-flex; align-items: center; gap: 8px; height: 32px;
|
|
padding: 0 12px; background: #fff; border: 1px solid #E8ECF1;
|
|
border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
|
|
}
|
|
.au-input input {
|
|
border: none; outline: none; background: transparent; font-size: 14px;
|
|
color: #262626; min-width: 160px; flex: 1; font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
.au-input input::placeholder { color: #767676; }
|
|
.au-input:focus-within { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
|
.au-input.is-error { border-color: #CF1322; }
|
|
.au-input.is-error:focus-within { border-color: #CF1322; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
|
.au-input.is-disabled, .au-input:disabled { background: #F5F5F5; border-color: transparent; }
|
|
.au-input.is-disabled input, .au-input:disabled input { color: #BFBFBF; cursor: not-allowed; }
|
|
.au-input .affix { display: inline-flex; flex-shrink: 0; color: #6E6E6E; align-items: center; }
|
|
.au-input .action {
|
|
display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
|
|
cursor: pointer; color: #6E6E6E; align-items: center;
|
|
}
|
|
.au-input .action:hover { color: #2F54EB; }
|
|
.au-input-lg { height: 40px; }
|
|
.au-input-sm { height: 24px; }
|
|
.au-input-sm input { font-size: 12px; min-width: 120px; }
|
|
.error-text { font-size: 12px; color: #CF1322; line-height: 20px; }
|
|
</style>
|