优化输入框样式
parent
4f4cac8ddc
commit
93a31f29f9
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Reference in New Issue