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

优化输入框样式

old
宇天 2021-04-26 16:31:26 +08:00
parent 4f4cac8ddc
commit 93a31f29f9
3 changed files with 50 additions and 44 deletions

View File

@ -612,13 +612,14 @@ export default class Input {
break break
case 'maxlength': case 'maxlength':
case 'minlength':
if (val === null) { if (val === null) {
this.__INPUT__.removeAttribute(name) this.__INPUT__.removeAttribute(name)
} else { } else {
let n = +val let n = +val
if (n > 0) { if (n > 0) {
this.__INPUT__.setAttribute(name, +val) this.__INPUT__.setAttribute(name, n)
} else {
this.removeAttribute(name)
} }
} }
break break

View File

@ -93,34 +93,6 @@ li {
} }
} }
/* 额外样式 */
:host([round]) {
border-radius: 26px;
.label input {
padding: 0 10px;
margin: 0 18px;
}
.label[prepend] input,
.label[append] input {
padding: 0 5px;
}
.label[prepend] input {
margin-left: 0;
}
.label[append] input {
margin-right: 0;
}
.prepend {
border-radius: 26px 0 0 26px;
}
.append {
border-radius: 0 26px 26px 0;
}
}
:host([size='large']) { :host([size='large']) {
min-width: 234px; min-width: 234px;
.label { .label {
@ -185,6 +157,33 @@ li {
} }
} }
/* 额外样式 */
:host([round]) {
border-radius: 26px;
.label input {
padding: 0 26px;
}
.label[prepend] input,
.label[append] input {
padding: 0 5px;
}
.label[prepend] input {
margin-left: 0;
}
.label[append] input {
margin-right: 0;
}
.prepend {
border-radius: 26px 0 0 26px;
}
.append {
border-radius: 0 26px 26px 0;
}
}
/* ----- 类型(颜色) ----- */ /* ----- 类型(颜色) ----- */
:host(:focus-within) { :host(:focus-within) {
box-shadow: 0 0 0 2px var(--color-plain-a); box-shadow: 0 0 0 2px var(--color-plain-a);
@ -275,7 +274,6 @@ li {
</style> </style>
<script> <script>
import '../scroll/index'
import '../icon/index' import '../icon/index'
import $ from '../utils' import $ from '../utils'
@ -283,8 +281,8 @@ export default class Passwd {
props = { props = {
value: '', value: '',
placeholder: '', placeholder: '',
maxlength: null, maxlength: 0,
minlength: null, minlength: 0,
autofocus: false, autofocus: false,
readonly: false, readonly: false,
disabled: false, disabled: false,
@ -438,13 +436,14 @@ export default class Passwd {
break break
case 'maxlength': case 'maxlength':
case 'minlength':
if (val === null) { if (val === null) {
this.__INPUT__.removeAttribute(name) this.__INPUT__.removeAttribute(name)
} else { } else {
let n = +val let n = +val
if (n > 0) { if (n > 0) {
this.__INPUT__.setAttribute(name, +val) this.__INPUT__.setAttribute(name, n)
} else {
this.removeAttribute(name)
} }
} }
break break

View File

@ -272,15 +272,21 @@ export default class Textarea {
break break
case 'maxlength': case 'maxlength':
case 'minlength': {
let len = this.value.length
if (val === null) { if (val === null) {
this.__INPUT__.removeAttribute(name) this.__INPUT__.removeAttribute(name)
this.props[name] = 0 this.props.maxlength = 0
this.__STAT__.textContent = `${len}/∞`
} else { } else {
let n = +val let n = +val
if (n > 0) { if (n > 0) {
this.__INPUT__.setAttribute(name, n) this.__INPUT__.setAttribute(name, n)
this.props[name] = n this.props.maxlength = n
this.__STAT__.textContent = `${len}/${n}`
} else {
this.removeAttribute(name)
}
} }
} }
break break