u
This commit is contained in:
oneao committed
1 parent
9a432e7ab2
commit
261a263180
13 files changed
+635
-199
No files matched your search
@@ -7,65 +7,139 @@ $input-prefix: #{$prefix}-input;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
color: #000000d9;
|
||||
padding: 0 8px;
|
||||
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
border cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
|
||||
box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
|
||||
background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
|
||||
|
||||
&:hover:not(&-disabled) {
|
||||
border-color: $primary-color;
|
||||
.#{$input-prefix}-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within:not(&-disabled) {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0 1px color.change($primary-color, $alpha: 0.1);
|
||||
&:hover {
|
||||
border-color: $input-hover-color;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: #00000040;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #d9d9d9;
|
||||
&:focus-within {
|
||||
border-color: $input-focus-color;
|
||||
box-shadow: $input-focus-shadow;
|
||||
}
|
||||
|
||||
&.#{$input-prefix}-size {
|
||||
&-small {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-medium {
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-large {
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$input-prefix}-align {
|
||||
&-left {
|
||||
text-align: left;
|
||||
}
|
||||
&-right {
|
||||
text-align: right;
|
||||
}
|
||||
&-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$input-prefix}-prefix,
|
||||
.#{$input-prefix}-suffix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-prefix {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-suffix {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&.#{$input-prefix}-disabled {
|
||||
background-color: #fafafc;
|
||||
cursor: not-allowed;
|
||||
|
||||
.#{$input-prefix}-input {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
.#{$input-prefix}-input::placeholder {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
.#{$input-prefix}-prefix,
|
||||
.#{$input-prefix}-suffix {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: #ddd;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
&-small {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
&.#{$input-prefix}-readonly {
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
&-medium {
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
|
||||
.#{$input-prefix}-clear {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
margin-left: 4px;
|
||||
|
||||
&:hover {
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
&-large {
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
|
||||
.#{$input-prefix}-count {
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-password-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-left: 4px;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$input-prefix}-inner {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: #00000040;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$input-prefix}-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #00000040;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user