122 lines
4.5 KiB
Vue
122 lines
4.5 KiB
Vue
<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="value"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@input="onInput"
|
|
@focus="$emit('focus', $event)"
|
|
@blur="$emit('blur', $event)"
|
|
>
|
|
|
|
<button
|
|
v-if="clearable && value && !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>
|
|
export default {
|
|
name: 'AaInput',
|
|
props: {
|
|
value: { type: [String, Number], default: '' },
|
|
size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },
|
|
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 }
|
|
},
|
|
data() {
|
|
return { showPassword: false };
|
|
},
|
|
computed: {
|
|
sizeMap() { return { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' }; },
|
|
classes() {
|
|
return [
|
|
this.sizeMap[this.size],
|
|
{ 'is-error': this.error, 'is-disabled': this.disabled }
|
|
];
|
|
},
|
|
resolvedType() {
|
|
if (this.type === 'password') return this.showPassword ? 'text' : 'password';
|
|
return this.type;
|
|
}
|
|
},
|
|
methods: {
|
|
onInput(e) {
|
|
this.$emit('input', e.target.value);
|
|
},
|
|
clear() {
|
|
this.$emit('input', '');
|
|
this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- 样式对齐 components.css 与 input.json 契约 -->
|
|
<style>
|
|
.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: #BFBFBF; }
|
|
.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: #F5222D; }
|
|
.au-input.is-error:focus-within { border-color: #F5222D; 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: #8C8C8C; align-items: center; }
|
|
.au-input .action {
|
|
display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
|
|
cursor: pointer; color: #8C8C8C; 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: #F5222D; line-height: 20px; }
|
|
</style>
|