u
This commit is contained in:
oneao committed
1 parent
9a432e7ab2
commit
261a263180
13 files changed
+635
-199
No files matched your search
@@ -5,3 +5,7 @@ $primary-color: $default-color !default;
|
||||
$danger-color: #f93920 !default;
|
||||
$warning-color: #fc8800 !default;
|
||||
$success-color: #22c55e !default;
|
||||
|
||||
$input-hover-color: $default-color;
|
||||
$input-focus-color: $default-color;
|
||||
$input-focus-shadow: 0 0 0 2px #edf4ff;
|
||||
@@ -5,54 +5,69 @@ $btn-prefix: #{$prefix}-btn;
|
||||
$btn-hover-bgcolor: #f4f5f5;
|
||||
$btn-active-bgcolor: #eceded;
|
||||
|
||||
/* ====== 通用颜色交互函数（新版写法） ====== */
|
||||
@function color-hover($color, $amount: 8%) {
|
||||
$l: color.channel($color, 'lightness', $space: hsl);
|
||||
@if $l > 50% {
|
||||
// 亮色：向暗靠近
|
||||
@return color.scale($color, $lightness: -$amount);
|
||||
} @else {
|
||||
// 暗色：向亮靠近
|
||||
@return color.scale($color, $lightness: $amount);
|
||||
}
|
||||
@return color.scale($color, $lightness: -$amount);
|
||||
}
|
||||
|
||||
@function color-active($color, $amount: 12%) {
|
||||
$l: color.channel($color, 'lightness', $space: hsl);
|
||||
@if $l > 50% {
|
||||
@return color.scale($color, $lightness: -$amount);
|
||||
} @else {
|
||||
@return color.scale($color, $lightness: $amount);
|
||||
}
|
||||
@return color.scale($color, $lightness: -$amount);
|
||||
}
|
||||
|
||||
.#{$btn-prefix} {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&-small {
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-medium {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-large {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-icon-left {
|
||||
margin-right: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-icon-right {
|
||||
margin-left: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-icon-left-has-text {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&-icon-right-has-text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
@@ -176,23 +191,4 @@ $btn-active-bgcolor: #eceded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 尺寸 ===== */
|
||||
&-small {
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-medium {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-large {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -36,35 +36,39 @@ export default defineComponent({
|
||||
const map = { small: 14, medium: 16, large: 16 }
|
||||
return map[props.size]
|
||||
})
|
||||
const hasContent = !!slots.default?.().length
|
||||
|
||||
return () => (
|
||||
<button class={cls.value} disabled={props.disabled || props.loading}>
|
||||
{/* 左侧图标 */}
|
||||
{props.iconPosition === 'left' && (props.loading || props.icon) && (
|
||||
<Icon
|
||||
icon={props.loading ? 'mingcute:loading-line' : props.icon}
|
||||
class={`${prefixCls}-icon-left`}
|
||||
spin={props.loading}
|
||||
width={iconSize.value}
|
||||
height={iconSize.value}
|
||||
/>
|
||||
)}
|
||||
return () => {
|
||||
return (
|
||||
<button class={cls.value} disabled={props.disabled || props.loading}>
|
||||
{props.iconPosition === 'left' && (props.loading || props.icon) && (
|
||||
<Icon
|
||||
icon={props.loading ? 'mingcute:loading-line' : props.icon}
|
||||
class={[
|
||||
`${prefixCls}-icon-left`,
|
||||
hasContent ? `${prefixCls}-icon-left-has-text` : '',
|
||||
]}
|
||||
spin={props.loading}
|
||||
size={iconSize.value}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 插槽文本 */}
|
||||
<span>
|
||||
{slots.default?.()}
|
||||
</span>
|
||||
<span>
|
||||
{slots.default?.()}
|
||||
</span>
|
||||
|
||||
{/* 右侧图标 */}
|
||||
{props.iconPosition === 'right' && props.icon && (
|
||||
<Icon
|
||||
icon={props.icon}
|
||||
class={`${prefixCls}-icon-right`}
|
||||
width={iconSize.value}
|
||||
height={iconSize.value}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
{props.iconPosition === 'right' && props.icon && (
|
||||
<Icon
|
||||
icon={props.icon}
|
||||
class={[
|
||||
`${prefixCls}-icon-right`,
|
||||
hasContent ? `${prefixCls}-icon-right-has-text` : '',
|
||||
]}
|
||||
size={iconSize.value}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -5,29 +5,50 @@ import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import './index.scss'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Icon',
|
||||
name: 'AIcon',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
icon: { type: String as PropType<string>, required: true },
|
||||
width: { type: Number, default: 16 },
|
||||
height: { type: Number, default: 16 },
|
||||
size: { type: Number, default: 16 },
|
||||
color: { type: String, default: 'currentColor' },
|
||||
spin: { type: Boolean, default: false },
|
||||
rotate: { type: Number, default: 360 },
|
||||
onClick: Function as PropType<(e: MouseEvent) => void>, // 明确 MouseEvent 类型
|
||||
},
|
||||
setup(props) {
|
||||
setup(props, { attrs }) {
|
||||
const prefixCls = getPrefixCls('icon')
|
||||
|
||||
// 安全调用 onClick
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
props.onClick?.(e)
|
||||
// 如果 attrs 上也传了 onClick，做类型断言
|
||||
if (attrs.onClick) {
|
||||
(attrs.onClick as (e: MouseEvent) => void)(e)
|
||||
}
|
||||
}
|
||||
|
||||
return () => (
|
||||
<Icon
|
||||
icon={props.icon}
|
||||
width={props.width}
|
||||
height={props.height}
|
||||
<i
|
||||
class={props.spin ? `${prefixCls}-spin` : ''}
|
||||
style={{
|
||||
'display': 'inline-flex',
|
||||
'alignItems': 'center',
|
||||
'justifyContent': 'center',
|
||||
'color': props.color,
|
||||
'verticalAlign': 'middle',
|
||||
'--rotate-angle': `${props.rotate}deg`,
|
||||
}}
|
||||
class={props.spin ? `${prefixCls}-spin` : ''}
|
||||
/>
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Icon
|
||||
{...attrs}
|
||||
icon={props.icon}
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
style={{
|
||||
verticalAlign: 'middle',
|
||||
}}
|
||||
/>
|
||||
</i>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -1,2 +1,9 @@
|
||||
@use './button/index.scss' as *;
|
||||
@use './input/index.scss' as *;
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@@ -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