u
This commit is contained in:
oneao committed
1 parent
de2351e1b2
commit
ab0489f692
22 files changed
+1100
-300
No files matched your search
@@ -3,69 +3,20 @@
|
||||
|
||||
$input-prefix: #{$prefix}-input;
|
||||
|
||||
.#{$input-prefix}-adornment {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&.#{$input-prefix}-size {
|
||||
&-small {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-medium {
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-large {
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.#{$input-prefix}-size {
|
||||
&-small {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-adornment-prepend,
|
||||
.#{$input-prefix}-adornment-append {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: #f3f3f3;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #ddd;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
padding: 0 8px;
|
||||
}
|
||||
&-medium {
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-adornment-prepend {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-adornment-append {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-wrapper {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
&-large {
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,9 +24,9 @@ $input-prefix: #{$prefix}-input;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border: $input-border;
|
||||
border-radius: $border-radius;
|
||||
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
transition:
|
||||
@@ -83,7 +34,7 @@ $input-prefix: #{$prefix}-input;
|
||||
box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
|
||||
background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
|
||||
|
||||
.#{$input-prefix}-input {
|
||||
.#{$input-prefix}-inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -97,16 +48,16 @@ $input-prefix: #{$prefix}-input;
|
||||
height: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $input-hover-color;
|
||||
border-color: $input-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $input-focus-color;
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: $input-focus-shadow;
|
||||
}
|
||||
|
||||
@@ -139,37 +90,48 @@ $input-prefix: #{$prefix}-input;
|
||||
}
|
||||
|
||||
&.#{$input-prefix}-disabled {
|
||||
background-color: #fafafc;
|
||||
background-color: $input-disabled-bg-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
.#{$input-prefix}-input {
|
||||
color: #a8a8a8;
|
||||
color: $input-disabled-font-color;
|
||||
}
|
||||
.#{$input-prefix}-input::placeholder {
|
||||
color: #a8a8a8;
|
||||
color: $input-disabled-font-color;
|
||||
}
|
||||
.#{$input-prefix}-prefix,
|
||||
.#{$input-prefix}-suffix {
|
||||
color: #a8a8a8;
|
||||
color: $input-disabled-font-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: #ddd;
|
||||
border-color: $input-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$input-prefix}-readonly {
|
||||
background-color: #fdfdfd;
|
||||
background-color: $input-readonly-bg-color;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-clear {
|
||||
.#{$input-prefix}-icon {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
transition:
|
||||
color 0.2s,
|
||||
background-color 0.2s;
|
||||
color: $input-affix-color;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: $input-icon-wrapper-size;
|
||||
height: $input-icon-wrapper-size;
|
||||
|
||||
&:hover {
|
||||
color: red !important;
|
||||
background-color: $input-icon-hover-bg-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,9 +139,6 @@ $input-prefix: #{$prefix}-input;
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{$input-prefix}-password {
|
||||
cursor: pointer !important;
|
||||
color: $input-affix-color;
|
||||
}
|
||||
}
|
||||
@@ -24,13 +24,12 @@ export default defineComponent({
|
||||
showCount: Boolean,
|
||||
maxlength: Number,
|
||||
password: Boolean,
|
||||
prepend: String,
|
||||
append: String,
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('input')
|
||||
const inputValue = ref(props.modelValue || '')
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
// 控制密码显示/隐藏
|
||||
const showPassword = ref(false)
|
||||
@@ -53,11 +52,20 @@ export default defineComponent({
|
||||
return showPassword.value ? 'text' : 'password'
|
||||
})
|
||||
|
||||
const inputWrapper = () => {
|
||||
const clearValue = () => {
|
||||
updateValue('')
|
||||
|
||||
if (inputRef.value) {
|
||||
inputRef.value.focus()
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${prefixCls}-wrapper`,
|
||||
`${prefixCls}-size-${props.size}`,
|
||||
props.disabled && `${prefixCls}-disabled`,
|
||||
props.readonly && `${prefixCls}-readonly`,
|
||||
]}
|
||||
@@ -69,7 +77,8 @@ export default defineComponent({
|
||||
)}
|
||||
|
||||
<input
|
||||
class={`${prefixCls}-input ${prefixCls}-align-${props.align}`}
|
||||
ref={inputRef}
|
||||
class={`${prefixCls}-inner ${prefixCls}-align-${props.align}`}
|
||||
type={inputType.value}
|
||||
value={inputValue.value}
|
||||
placeholder={props.placeholder}
|
||||
@@ -80,30 +89,28 @@ export default defineComponent({
|
||||
|
||||
{props.clearable && inputValue.value && !props.disabled && !props.readonly && (
|
||||
<span
|
||||
class={`${prefixCls}-suffix`}
|
||||
onClick={() => updateValue('')}
|
||||
class={`${prefixCls}-suffix ${prefixCls}-icon`}
|
||||
onClick={clearValue}
|
||||
>
|
||||
<Icon
|
||||
class={`${prefixCls}-clear`}
|
||||
icon="material-symbols:cancel-outline-rounded"
|
||||
icon="ic:round-clear"
|
||||
/>
|
||||
</span>
|
||||
|
||||
)}
|
||||
|
||||
{/* 密码切换图标 */}
|
||||
{props.password && (
|
||||
<span
|
||||
class={`${prefixCls}-suffix`}
|
||||
class={`${prefixCls}-suffix ${prefixCls}-icon`}
|
||||
onClick={() => (showPassword.value = !showPassword.value)}
|
||||
>
|
||||
<Icon icon={showPassword.value ? 'mage:eye-off' : 'mage:eye'} class={`${prefixCls}-password`} />
|
||||
<Icon icon={showPassword.value ? 'mingcute:eye-close-line' : 'mingcute:eye-2-line'} />
|
||||
</span>
|
||||
)}
|
||||
|
||||
{(slots.suffix || props.suffixIcon) && !props.password && (
|
||||
<div class={`${prefixCls}-suffix`}>
|
||||
{slots.suffix?.() ?? <Icon icon={props.suffixIcon!} size={14} />}
|
||||
{slots.suffix?.() ?? <Icon icon={props.suffixIcon!} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -113,29 +120,5 @@ export default defineComponent({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div class={`${prefixCls}-adornment ${prefixCls}-size-${props.size}`}>
|
||||
{props.prepend || slots.prepend
|
||||
? (
|
||||
<div class={`${prefixCls}-adornment-prepend`}>
|
||||
{slots.prepend?.() ?? (props.prepend && <span>{props.prepend}</span>)}
|
||||
</div>
|
||||
)
|
||||
: null}
|
||||
|
||||
{inputWrapper()}
|
||||
|
||||
{props.append || slots.append
|
||||
? (
|
||||
<div class={`${prefixCls}-adornment-append`}>
|
||||
{slots.append?.() ?? (props.append && <span>{props.append}</span>)}
|
||||
</div>
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
Reference in new issue
Block a user