This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

完成input组件调整

old
宇天 2021-02-24 11:50:36 +08:00
parent 5f9bc4f95a
commit ccc877378a
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/form/input.wc
View File

@ -72,15 +72,14 @@ li {
height: 28px; height: 28px;
padding: 0 10px; padding: 0 10px;
line-height: 1; line-height: 1;
background: var(--bg-color, --color-plain-1);
white-space: nowrap; white-space: nowrap;
} }
.prepend { .prepend {
border-right: 2px solid var(--color-plain-a); border-right: 2px solid var(--color-plain-1);
border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} }
.append { .append {
border-left: 2px solid var(--color-plain-a); border-left: 2px solid var(--color-plain-1);
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} }
&[prepend] .prepend, &[prepend] .prepend,
@ -141,27 +140,34 @@ li {
/* 额外样式 */ /* 额外样式 */
:host([round]) { :host([round]) {
border-radius: 21px; border-radius: 26px;
.label input { .label input {
padding: 0 10px; padding: 0 10px;
margin: 0 18px;
} }
.label[prepend] input, .label[prepend] input,
.label[append] input { .label[append] input {
padding: 0 5px; padding: 0 5px;
} }
.label[prepend] input {
margin-left: 0;
}
.label[append] input {
margin-right: 0;
}
.prepend { .prepend {
border-radius: 21px 0 0 21px; border-radius: 26px 0 0 26px;
} }
.append { .append {
border-radius: 0 21px 21px 0; border-radius: 0 26px 26px 0;
} }
} }
:host([size='large']) { :host([size='large']) {
min-width: 212px; min-width: 232px;
.label { .label {
height: 52px; height: 52px;
font-size: 18px; font-size: 18px;
@ -173,6 +179,7 @@ li {
.prepend, .prepend,
.append { .append {
height: 48px; height: 48px;
padding: 0 16px;
} }
.icon { .icon {
@ -286,9 +293,6 @@ li {
} }
/* --- */ /* --- */
:host([auto-border]) .label {
border-color: transparent;
}
:host([disabled]) { :host([disabled]) {
cursor: not-allowed; cursor: not-allowed;
@ -304,14 +308,19 @@ li {
:host([no-border]), :host([no-border]),
:host(:focus-within[no-border]) { :host(:focus-within[no-border]) {
box-shadow: none;
.label { .label {
border: 0; border: 0;
&[prepend] input {
padding-left: 2px;
} }
} &[append] input {
:host([transparent]) { padding-right: 2px;
.label { }
background: transparent; }
.prepend,
.append {
border: 0;
} }
} }
</style> </style>
@ -495,7 +504,12 @@ export default class Input {
// 输入状态事件 // 输入状态事件
this._handleChange = $.bind(this.__INPUT__, 'input', ev => { this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
let now = Date.now() let now = Date.now()
let { lazy } = this.props let { lazy, passwd } = this.props
// 密码类型不触发输入建议
if (passwd) {
return
}
// 并发拦截 // 并发拦截
if (lazy && now - this.stamp < lazy) { if (lazy && now - this.stamp < lazy) {