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