优化input组件;node-sass改成sass
parent
9d515d3e1a
commit
b1fb808508
|
@ -4,7 +4,7 @@ require('es.shim')
|
|||
const log = console.log
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const scss = require('node-sass')
|
||||
const scss = require('sass')
|
||||
const chokidar = require('chokidar')
|
||||
const chalk = require('chalk')
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ require('es.shim')
|
|||
const log = console.log
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const scss = require('node-sass')
|
||||
const scss = require('sass')
|
||||
const chalk = require('chalk')
|
||||
const { minify } = require('terser')
|
||||
|
||||
|
|
|
@ -65,7 +65,7 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|||
--color-orange-2: rgb(241, 196, 15);
|
||||
--color-orange-3: rgb(205, 167, 13);
|
||||
/* default1 */
|
||||
--color-plain-a: rgba(242, 245, 252, 0.5);
|
||||
--color-plain-a: rgba(150, 204, 248, 0.5);
|
||||
--color-plain-1: rgb(242, 245, 252);
|
||||
--color-plain-2: rgb(232, 235, 244);
|
||||
--color-plain-3: rgb(218, 225, 233);
|
||||
|
|
|
@ -417,6 +417,8 @@ export default class Button {
|
|||
}, 10)
|
||||
}
|
||||
break
|
||||
|
||||
//
|
||||
case 'lazy':
|
||||
this.props.lazy = val >> 0
|
||||
break
|
||||
|
|
|
@ -342,7 +342,8 @@ export default class Input {
|
|||
autofocus: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
passwd: false
|
||||
passwd: false,
|
||||
lazy: 0 // 输入建议并发拦截时间, 单位毫秒
|
||||
}
|
||||
|
||||
state = {
|
||||
|
@ -455,25 +456,11 @@ export default class Input {
|
|||
this.state.mvidx = null
|
||||
}
|
||||
|
||||
_updateAttr() {
|
||||
var { maxlength, minlength } = this.props
|
||||
|
||||
if (maxlength && maxlength > 0) {
|
||||
this.__INPUT__.setAttribute('maxlength', maxlength)
|
||||
} else {
|
||||
this.__INPUT__.removeAttribute('maxlength')
|
||||
}
|
||||
if (minlength && minlength > 0) {
|
||||
this.__INPUT__.setAttribute('minlength', minlength)
|
||||
} else {
|
||||
this.__INPUT__.removeAttribute('minlength')
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
var prepend = this.__PREPEND__.assignedNodes()
|
||||
var append = this.__APPEND__.assignedNodes()
|
||||
var { passwd } = this.props
|
||||
this.stamp = 0
|
||||
|
||||
// 相同插槽, 只允许1个
|
||||
while (prepend.length > 1) {
|
||||
|
@ -490,8 +477,6 @@ export default class Input {
|
|||
this.__OUTER__.setAttribute('append', '')
|
||||
}
|
||||
|
||||
this._updateAttr()
|
||||
|
||||
// 键盘事件
|
||||
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
|
||||
if (this.disabled || this.readOnly) {
|
||||
|
@ -518,7 +503,15 @@ export default class Input {
|
|||
|
||||
// 输入状态事件
|
||||
this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
|
||||
ev.preventDefault()
|
||||
let now = Date.now()
|
||||
|
||||
// 并发拦截
|
||||
if (lazy && now - this.stamp < lazy) {
|
||||
return
|
||||
}
|
||||
|
||||
this.stamp = now
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('fetch-suggest', {
|
||||
detail: {
|
||||
|
@ -563,7 +556,6 @@ export default class Input {
|
|||
}
|
||||
|
||||
unmount() {
|
||||
$.unbind(this.__INPUT__, 'wheel', this._handleWheel)
|
||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||
$.unbind(this.__INPUT__, 'input', this._handleChange)
|
||||
$.unbind(this.__LIST__, 'click', this._handleSelect)
|
||||
|
@ -601,8 +593,18 @@ export default class Input {
|
|||
|
||||
case 'maxlength':
|
||||
case 'minlength':
|
||||
this.props[name] = val
|
||||
this._updateAttr()
|
||||
if (val === null) {
|
||||
this.__INPUT__.removeAttribute(name)
|
||||
} else {
|
||||
let n = +val
|
||||
if (n > 0) {
|
||||
this.__INPUT__.setAttribute(name, +val)
|
||||
}
|
||||
}
|
||||
break
|
||||
|
||||
case 'lazy':
|
||||
this.props.lazy = val >> 0
|
||||
break
|
||||
|
||||
case 'readonly':
|
||||
|
|
Reference in New Issue