修复number组件;优化button,input组件
parent
4839b327b9
commit
b303647129
|
@ -115,6 +115,7 @@
|
||||||
}
|
}
|
||||||
:host([circle]) {
|
:host([circle]) {
|
||||||
min-width: 36px;
|
min-width: 36px;
|
||||||
|
width: 36px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
button {
|
button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -339,6 +339,7 @@ export default class Input {
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
list: [], // 补全列表
|
||||||
mvidx: null //下拉列表光标的索引ID
|
mvidx: null //下拉列表光标的索引ID
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -406,7 +407,7 @@ export default class Input {
|
||||||
|
|
||||||
// 移动光标选择下拉选项
|
// 移动光标选择下拉选项
|
||||||
_moveSelect(ev) {
|
_moveSelect(ev) {
|
||||||
var { list } = this.props
|
var { list } = this.state
|
||||||
if (list && list.length) {
|
if (list && list.length) {
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
var step = ev.keyCode === 38 ? -1 : 1
|
var step = ev.keyCode === 38 ? -1 : 1
|
||||||
|
@ -436,7 +437,7 @@ export default class Input {
|
||||||
|
|
||||||
// 触发列表选择
|
// 触发列表选择
|
||||||
_fetchSelect(idx, ev) {
|
_fetchSelect(idx, ev) {
|
||||||
var item = this.props.list[idx]
|
var item = this.state.list[idx]
|
||||||
this.value = item.value
|
this.value = item.value
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('select', {
|
new CustomEvent('select', {
|
||||||
|
@ -471,7 +472,8 @@ export default class Input {
|
||||||
|
|
||||||
// 键盘事件
|
// 键盘事件
|
||||||
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
|
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
|
||||||
let { passwd } = this.props
|
let { passwd, minlength } = this.props
|
||||||
|
let val = this.value
|
||||||
let now = Date.now()
|
let now = Date.now()
|
||||||
|
|
||||||
if (this.disabled || this.readOnly) {
|
if (this.disabled || this.readOnly) {
|
||||||
|
@ -497,6 +499,13 @@ export default class Input {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 长度不够,拦截submit
|
||||||
|
if (minlength && minlength > 0) {
|
||||||
|
if (val.length < minlength) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.stamp = now
|
this.stamp = now
|
||||||
this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
|
this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
|
||||||
}
|
}
|
||||||
|
@ -524,7 +533,7 @@ export default class Input {
|
||||||
detail: {
|
detail: {
|
||||||
value: this.value,
|
value: this.value,
|
||||||
send: list => {
|
send: list => {
|
||||||
this.props.list = list
|
this.state.list = list
|
||||||
this._parseSuggestion()
|
this._parseSuggestion()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -534,7 +543,7 @@ export default class Input {
|
||||||
|
|
||||||
// 渲染建议列表
|
// 渲染建议列表
|
||||||
this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
|
this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
|
||||||
var { list } = this.props
|
var { list } = this.state
|
||||||
let { x, y, width, height } = this.getBoundingClientRect()
|
let { x, y, width, height } = this.getBoundingClientRect()
|
||||||
if (list && list.length) {
|
if (list && list.length) {
|
||||||
var html = list
|
var html = list
|
||||||
|
@ -566,6 +575,7 @@ export default class Input {
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
$.unbind(this.__INPUT__, 'input', this._handleChange)
|
$.unbind(this.__INPUT__, 'input', this._handleChange)
|
||||||
|
$.unbind(this.__INPUT__, 'click', this._parseSuggestion)
|
||||||
$.unbind(this.__LIST__, 'click', this._handleSelect)
|
$.unbind(this.__LIST__, 'click', this._handleSelect)
|
||||||
$.clearOutside(this._inactiveFn)
|
$.clearOutside(this._inactiveFn)
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 2px solid var(--color-plain-2);
|
border: 2px solid var(--color-grey-2);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: var(--bg-color, #fff);
|
background: var(--bg-color, #fff);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -44,11 +44,11 @@
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: 4px 0 0 4px;
|
||||||
border-right: 2px solid var(--color-plain-1);
|
border-right: 2px solid var(--color-grey-a);
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
border-left: 2px solid var(--color-plain-1);
|
border-left: 2px solid var(--color-grey-a);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
|
@ -158,14 +158,11 @@
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
:host(:focus-within) {
|
:host(:focus-within) {
|
||||||
box-shadow: 0 0 0 2px var(--color-plain-a);
|
box-shadow: 0 0 0 2px var(--color-grey-a);
|
||||||
}
|
}
|
||||||
:host([type='primary']:focus-within) {
|
:host([type='primary']:focus-within) {
|
||||||
box-shadow: 0 0 0 2px var(--color-teal-a);
|
box-shadow: 0 0 0 2px var(--color-teal-a);
|
||||||
}
|
}
|
||||||
:host([type='default']:focus-within) {
|
|
||||||
box-shadow: 0 0 0 2px var(--color-grey-a);
|
|
||||||
}
|
|
||||||
:host([type='info']:focus-within) {
|
:host([type='info']:focus-within) {
|
||||||
box-shadow: 0 0 0 2px var(--color-blue-a);
|
box-shadow: 0 0 0 2px var(--color-blue-a);
|
||||||
}
|
}
|
||||||
|
@ -178,21 +175,12 @@
|
||||||
:host([type='warning']:focus-within) {
|
:host([type='warning']:focus-within) {
|
||||||
box-shadow: 0 0 0 2px var(--color-orange-a);
|
box-shadow: 0 0 0 2px var(--color-orange-a);
|
||||||
}
|
}
|
||||||
:host([type='inverse']:focus-within) {
|
|
||||||
box-shadow: 0 0 0 2px var(--color-dark-a);
|
|
||||||
}
|
|
||||||
:host([type='primary']) .label {
|
:host([type='primary']) .label {
|
||||||
border-color: var(--color-teal-2);
|
border-color: var(--color-teal-2);
|
||||||
span {
|
span {
|
||||||
border-color: var(--color-teal-a);
|
border-color: var(--color-teal-a);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([type='default']) .label {
|
|
||||||
border-color: var(--color-grey-2);
|
|
||||||
span {
|
|
||||||
border-color: var(--color-grey-a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:host([type='info']) .label {
|
:host([type='info']) .label {
|
||||||
border-color: var(--color-blue-2);
|
border-color: var(--color-blue-2);
|
||||||
span {
|
span {
|
||||||
|
@ -217,17 +205,9 @@
|
||||||
border-color: var(--color-orange-a);
|
border-color: var(--color-orange-a);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([type='inverse']) .label {
|
|
||||||
border-color: var(--color-dark-2);
|
|
||||||
span {
|
|
||||||
border-color: var(--color-dark-a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import '../scroll/index'
|
|
||||||
import '../icon/index'
|
|
||||||
import $ from '../utils'
|
import $ from '../utils'
|
||||||
|
|
||||||
export default class Number {
|
export default class Number {
|
||||||
|
@ -305,6 +285,7 @@ export default class Number {
|
||||||
this.__INPUT__.value = val
|
this.__INPUT__.value = val
|
||||||
|
|
||||||
this._checkActionEnable()
|
this._checkActionEnable()
|
||||||
|
this.dispatchEvent(new CustomEvent('input'))
|
||||||
}
|
}
|
||||||
|
|
||||||
_checkActionEnable() {
|
_checkActionEnable() {
|
||||||
|
@ -326,7 +307,6 @@ export default class Number {
|
||||||
if (n !== value) {
|
if (n !== value) {
|
||||||
this.props.value = n
|
this.props.value = n
|
||||||
this.__INPUT__.value = n
|
this.__INPUT__.value = n
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -372,34 +352,28 @@ export default class Number {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this._handleChange = $.catch(this.__INPUT__, 'change', ev => {
|
this._handleChange = $.bind(this.__INPUT__, 'change', ev => {
|
||||||
if (isFinite(this.__INPUT__.value)) {
|
if (isFinite(this.__INPUT__.value)) {
|
||||||
this.props.value = +this.__INPUT__.value
|
this.value = this.__INPUT__.value
|
||||||
if (!this.__INPUT__.value.endsWith('.')) {
|
|
||||||
this.__INPUT__.value = this.props.value
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.__INPUT__.value = this.props.value = 0
|
this.value = 0
|
||||||
}
|
}
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
})
|
})
|
||||||
|
|
||||||
this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
|
this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
|
||||||
if (this.disabled || this.readOnly) {
|
if (this.disabled || this.readOnly) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
var target = ev.target
|
|
||||||
|
|
||||||
if (target.tagName === 'SPAN' || target.parentNode === 'SPAN') {
|
if (ev.target.tagName === 'SPAN') {
|
||||||
var act = target.dataset.act || target.parentNode.dataset.act
|
this._updateValue(ev.target.dataset.act)
|
||||||
|
|
||||||
this._updateValue(act)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
|
$.unbind(this.__OUTER__, 'click', this._handleAction)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
|
Reference in New Issue