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

增加公共方法模块;优化scroll;完成datepicker;优化input

old
宇天 2019-08-08 16:59:37 +08:00
parent 5220b030d5
commit b936200b45
6 changed files with 397 additions and 206 deletions

View File

@ -37,15 +37,19 @@ $cd: #62778d #526273 #425064;
::after{box-sizing:border-box;} ::after{box-sizing:border-box;}
` `
function fixImport(str) {
return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
.replace(
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
}
function compileJs(entry, output) { function compileJs(entry, output) {
log('编译JS: %s', chalk.green(entry)) log('编译JS: %s', chalk.green(entry))
let buf = fs.cat(entry).toString() let buf = fs.cat(entry).toString()
let code = buf let code = fixImport(buf)
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
.replace(
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
fs.echo(code, output) fs.echo(code, output)
} }
@ -81,16 +85,11 @@ function mkWCFile({ style, html, js }) {
` `
}) })
js = js js = fixImport(js)
.replace(/class ([\w]+)/, function(s, m) { .replace(/class ([\w]+)/, function(s, m) {
name = m name = m
return `${s} extends HTMLElement ` return `${s} extends HTMLElement `
}) })
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
.replace(
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();') .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
.replace( .replace(
'/* render */', '/* render */',

View File

@ -37,16 +37,21 @@ $cd: #62778d #526273 #425064;
::after{box-sizing:border-box;} ::after{box-sizing:border-box;}
` `
function fixImport(str) {
return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
.replace(
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
}
const compileJs = (entry, output) => { const compileJs = (entry, output) => {
let t1 = Date.now() let t1 = Date.now()
let buf = fs.cat(entry).toString() let buf = fs.cat(entry).toString()
let { code } = uglify.minify(buf) let { code } = uglify.minify(buf)
code = code code = fixImport(code)
.replace(/import"([a-z0-9\/\.\-_]*)"/g, 'import "$1.js"')
.replace(
/import ([\w]*) from"([a-z0-9\/\.\-_]*)"/g,
'import $1 from "$2.js"'
)
log( log(
'编译JS: %s, 耗时 %s ms', '编译JS: %s, 耗时 %s ms',
chalk.green(entry), chalk.green(entry),
@ -87,16 +92,11 @@ function mkWCFile({ style, html, js }) {
` `
}) })
js = js js = fixImport(js)
.replace(/class ([\w]+)/, function(s, m) { .replace(/class ([\w]+)/, function(s, m) {
name = m name = m
return `${s} extends HTMLElement ` return `${s} extends HTMLElement `
}) })
.replace(/import '([a-z0-9\/\.\-_]*)'/g, 'import "$1.js"')
.replace(
/import ([\w]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"'
)
.replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();') .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();')
.replace( .replace(
'/* render */', '/* render */',

View File

@ -6,7 +6,9 @@
<slot class="append" name="append"></slot> <slot class="append" name="append"></slot>
<div class="suggestion"> <div class="suggestion">
<ul class="list"></ul> <wc-scroll>
<ul class="list"></ul>
</wc-scroll>
</div> </div>
</div> </div>
</template> </template>
@ -17,6 +19,7 @@ li {
list-style: none; list-style: none;
} }
:host { :host {
overflow: hidden;
display: inline-block; display: inline-block;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -25,7 +28,6 @@ li {
} }
.label { .label {
position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -94,11 +96,11 @@ li {
.suggestion { .suggestion {
display: none; display: none;
position: absolute; position: fixed;
z-index: 10240; z-index: 10240;
left: 0; left: 0;
top: 50px; top: 0;
width: 100%; width: 200px;
height: auto; height: auto;
max-height: 200px; max-height: 200px;
min-height: 46px; min-height: 46px;
@ -108,8 +110,6 @@ li {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
.list { .list {
overflow: hidden;
overflow-y: auto;
width: 100%; width: 100%;
} }
@ -219,7 +219,9 @@ li {
</style> </style>
<script> <script>
import '../scroll/index'
import '../icon/index' import '../icon/index'
import { nextTick, ebind, bind, unbind } from '../utils'
const IS_FIREFOX = !!window.sidebar const IS_FIREFOX = !!window.sidebar
const TYPES = ['text', 'textarea', 'password'] const TYPES = ['text', 'textarea', 'password']
@ -327,7 +329,9 @@ export default class Input {
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
var items = Array.from(this.__LIST__.firstElementChild.children) var items = Array.from(
this.__LIST__.firstElementChild.firstElementChild.children
)
if (this.props.mvidx === null) { if (this.props.mvidx === null) {
this.props.mvidx = 0 this.props.mvidx = 0
} else { } else {
@ -383,8 +387,8 @@ export default class Input {
var { type } = this.props var { type } = this.props
// 回车事件 // 键盘事件
this._handleSubmit = ev => { this._handleSubmit = ebind(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) { if (this.disabled || this.readonly) {
ev.stopPropagation() ev.stopPropagation()
return return
@ -404,7 +408,6 @@ export default class Input {
return this._fetchSelect(this.props.mvidx, ev) return this._fetchSelect(this.props.mvidx, ev)
} }
//
if ( if (
type === 'text' || type === 'text' ||
(type === 'textarea' && (ev.ctrlKey || ev.metaKey)) (type === 'textarea' && (ev.ctrlKey || ev.metaKey))
@ -416,69 +419,65 @@ export default class Input {
) )
} }
} }
} })
// 输入状态事件
this._handleChange = ev => {
ev.preventDefault()
this.dispatchEvent(
new CustomEvent('fetch-suggestions', {
detail: {
value: this.value,
send: list => {
this.props.list = list
this._parseSuggestion()
}
}
})
)
}
// 渲染建议列表
this._parseSuggestion = ev => {
var { list } = this.props
if (list && list.length) {
var html = list
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
.join('')
this.__LIST__.firstElementChild.innerHTML = html
this.__LIST__.classList.toggle('show', true)
} else {
this.__LIST__.classList.toggle('show', false)
}
}
// 失去焦点
this._handleBlur = ev => {
setTimeout(() => {
this.__LIST__.classList.remove('show')
}, 50)
}
// 选择建议
this._handleSelect = ev => {
if (ev.target.tagName === 'LI') {
this._fetchSelect(ev.target.dataset.idx, ev)
}
}
this.__INPUT__.addEventListener('keydown', this._handleSubmit, false)
// 非textarea, 可做输入建议功能 // 非textarea, 可做输入建议功能
if (type === 'text') { if (type === 'text') {
this.__INPUT__.addEventListener('input', this._handleChange, false) // 输入状态事件
this.__INPUT__.addEventListener('focus', this._parseSuggestion, false) this._handleChange = bind(this.__INPUT__, 'input', ev => {
this.__INPUT__.addEventListener('blur', this._handleBlur, false) ev.preventDefault()
this.__LIST__.addEventListener('click', this._handleSelect, false) this.dispatchEvent(
new CustomEvent('fetch-suggest', {
detail: {
value: this.value,
send: list => {
this.props.list = list
this._parseSuggestion()
}
}
})
)
})
// 渲染建议列表
this._parseSuggestion = bind(this.__INPUT__, 'click', ev => {
var { list } = this.props
let { x, y, width } = this.getBoundingClientRect()
if (list && list.length) {
var html = list
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
.join('')
this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
this.__LIST__.classList.toggle('show', true)
this.__LIST__.style.cssText = `left:${x}px;top:${y +
50}px;width:${width}px;`
} else {
this.__LIST__.classList.toggle('show', false)
}
})
this._bubbleFn = ebind(this, 'click')
this._inactiveFn = bind(document, 'click', ev => {
this.__LIST__.classList.remove('show')
})
// 选择建议
this._handleSelect = bind(this.__LIST__, 'click', ev => {
if (ev.target.tagName === 'LI') {
this._fetchSelect(ev.target.dataset.idx, ev)
}
})
} }
} }
unmount() { unmount() {
this.__INPUT__.removeEventListener('keydown', this._handleSubmit) unbind(this.__INPUT__, 'keydown', this._handleSubmit)
this.__INPUT__.removeEventListener('input', this._handleChange) unbind(this.__INPUT__, 'input', this._handleChange)
this.__INPUT__.removeEventListener('focus', this._parseSuggestion) unbind(this, 'click', this._bubbleFn)
this.__INPUT__.removeEventListener('blur', this._handleBlur) unbind(document, 'click', this._inactiveFn)
this.__LIST__.removeEventListener('click', this._handleSelect) unbind(this.__INPUT__, 'blur', this._handleBlur)
unbind(this.__LIST__, 'click', this._handleSelect)
} }
watch(name, old, val) { watch(name, old, val) {

View File

@ -1,6 +1,6 @@
<template> <template>
<label class="input" tabindex="0"> <label class="input" tabindex="0">
<span>ddd</span> <span></span>
<wc-icon class="icon" is="calendar"></wc-icon> <wc-icon class="icon" is="calendar"></wc-icon>
</label> </label>
<div class="calendar"> <div class="calendar">
@ -21,6 +21,7 @@
<span>六</span> <span>六</span>
</section> </section>
<section class="days"></section> <section class="days"></section>
<div class="tips">日期超出限制</div>
</div> </div>
</template> </template>
@ -41,7 +42,7 @@
align-items: center; align-items: center;
min-width: 64px; min-width: 64px;
height: 32px; height: 32px;
font-size: 14px; font-size: 13px;
border: 1px solid nth($cp, 3); border: 1px solid nth($cp, 3);
border-radius: inherit; border-radius: inherit;
background: #fff; background: #fff;
@ -57,14 +58,10 @@
color: nth($cgr, 1); color: nth($cgr, 1);
} }
} }
&:focus {
border-color: nth($ct, 1);
}
/* ----- */ /* ----- */
.icon { .icon {
padding: 0 5px; padding: 0 5px;
--size: 20px; --size: 16px;
} }
} }
@ -74,11 +71,12 @@
z-index: 10240; z-index: 10240;
left: 0; left: 0;
top: 0; top: 0;
width: 202px; width: 216px;
height: auto; height: auto;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 12px;
text-align: center;
background: #fff; background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
@ -100,11 +98,13 @@
justify-content: space-between; justify-content: space-between;
height: 30px; height: 30px;
margin: 8px 0; margin: 8px 0;
font-size: 14px;
wc-icon { wc-icon {
--size: 16px; --size: 16px;
margin: 0 3px; margin: 0 3px;
color: nth($cgr, 1); color: nth($cgr, 1);
cursor: pointer;
} }
span { span {
flex: 1; flex: 1;
@ -113,10 +113,9 @@
} }
.week { .week {
display: flex; display: flex;
height: 27px; height: 29px;
border-bottom: 1px solid #f2f5fc; border-bottom: 1px solid #f2f5fc;
text-align: center; font-size: 14px;
font-weight: bold;
span { span {
flex: 1; flex: 1;
} }
@ -125,47 +124,88 @@
.days { .days {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 8px;
line-height: 26px; line-height: 26px;
text-align: center;
span { span {
position: relative; position: relative;
width: 26px; width: 28px;
height: 26px; height: 28px;
border: 1px solid transparent;
border-radius: 50%;
&:hover {
border-color: #f2f5fc;
font-size: 13px;
}
&[weekend] { &[weekend] {
color: nth($ct, 1); color: nth($ct, 1);
} }
&[picked] { &[picked] {
color: #fff; color: #fff;
border-color: #f2f5fc;
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 3px;
top: 0; top: 3px;
z-index: -1; z-index: -1;
width: 100%; width: 20px;
height: 100%; height: 20px;
border-radius: 50%; border-radius: 50%;
background: nth($ct, 1); background: nth($ct, 1);
content: ''; content: '';
} }
} }
&[disabled] { &[disabled] {
border-color: transparent;
font-size: 12px;
color: nth($cp, 3); color: nth($cp, 3);
} }
} }
} }
.tips {
display: none;
position: absolute;
z-index: 10241;
left: 25%;
top: 40%;
width: 50%;
height: 30px;
line-height: 28px;
background: #fffbed;
color: nth($co, 2);
border: 1px solid nth($co, 1);
border-radius: 4px;
}
}
:host(:focus-within) {
box-shadow: 0 0 3px nth($ct, 1);
}
:host(:focus-within[readonly]) {
box-shadow: 0 0 3px nth($co, 1);
}
:host([disabled]) {
opacity: 0.6;
.input {
cursor: not-allowed;
background: #f3f5fb;
}
} }
</style> </style>
<script> <script>
import '../icon/index' import '../icon/index'
import { nextTick, each, ebind, bind, unbind } from '../utils'
const today = new Date() const today = new Date()
/**************** 公共函数 *****************/ /**************** 公共函数 *****************/
//计算日历数组 //计算日历数组
function getCalendarTable({ year, month, max, min, last }) { function getCalendarTable({ year, month, max, min, last }) {
let nums = getTotalDays(year, month) let nums = getTotalDays(year, month)
@ -173,7 +213,6 @@ function getCalendarTable({ year, month, max, min, last }) {
let isLimitYM = isLimited({ max, min }, { year, month }) let isLimitYM = isLimited({ max, min }, { year, month })
let list = [] let list = []
log(isLimitYM, year, month)
for (let i = numsFixed; i <= nums; i++) { for (let i = numsFixed; i <= nums; i++) {
let day = { let day = {
weekend: false, weekend: false,
@ -210,10 +249,6 @@ function isLimited({ max, min }, { year, month }) {
} else if (month === max.month) { } else if (month === max.month) {
result += '+' result += '+'
} }
// todo next
// result += '+'
} else {
// return true
} }
} }
@ -226,9 +261,6 @@ function isLimited({ max, min }, { year, month }) {
} else if (month === min.month) { } else if (month === min.month) {
result += '-' result += '-'
} }
// todo next
} else {
// return true
} }
} }
return result return result
@ -291,7 +323,9 @@ export default class DatePicker {
'min-date': '', 'min-date': '',
max: null, max: null,
min: null, min: null,
calendar: null calendar: null,
readonly: false,
disabled: false
} }
constructor() { constructor() {
@ -301,7 +335,8 @@ export default class DatePicker {
this.__INPUT__ = this.root.children[1] this.__INPUT__ = this.root.children[1]
this.__CALENDAR__ = this.root.children[2] this.__CALENDAR__ = this.root.children[2]
this.__CTRL__ = this.__CALENDAR__.firstElementChild this.__CTRL__ = this.__CALENDAR__.firstElementChild
this.__DAYS__ = this.__CALENDAR__.lastElementChild this.__DAYS__ = this.__CALENDAR__.children[2]
this.__TIPS__ = this.__CALENDAR__.lastElementChild
} }
get value() { get value() {
@ -313,7 +348,7 @@ export default class DatePicker {
if (!Date.isDate(val)) { if (!Date.isDate(val)) {
val = new Date(val) val = new Date(val)
if (val.toString() === 'Invalid Date') { if (val.toString() === 'Invalid Date') {
val = new Date() return
} }
} }
this._updateValue(val) this._updateValue(val)
@ -322,10 +357,68 @@ export default class DatePicker {
this.props.value = '' this.props.value = ''
this.__INPUT__.firstElementChild.textContent = '' this.__INPUT__.firstElementChild.textContent = ''
} }
let { calendar, last } = this.props
if (
!calendar.year ||
(last && calendar.year !== last.year && calendar.month !== last.month)
) {
this.props.calendar = { ...last }
}
this._renderCalendar() this._renderCalendar()
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
} }
_updateValue(oDate) { get readonly() {
return this.props.readonly
}
set readonly(val) {
var type = typeof val
if (val === this.props.readonly) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.readonly = true
this.setAttribute('readonly', '')
} else {
this.props.readonly = false
this.removeAttribute('readonly')
}
}
get disabled() {
return this.props.disabled
}
set disabled(val) {
var type = typeof val
if (val === this.props.disabled) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.disabled = true
this.setAttribute('disabled', '')
this.__INPUT__.removeAttribute('tabindex')
} else {
this.props.disabled = false
this.removeAttribute('disabled')
this.__INPUT__.setAttribute('tabindex', '0')
}
}
_tips() {
clearTimeout(this.timer)
this.__TIPS__.style.display = 'block'
this.timer = setTimeout(() => {
this.__TIPS__.style.display = ''
}, 1500)
}
_updateValue(oDate, needUpdateStyle) {
this.props.last = { this.props.last = {
year: oDate.getFullYear(), year: oDate.getFullYear(),
month: oDate.getMonth(), month: oDate.getMonth(),
@ -333,6 +426,18 @@ export default class DatePicker {
} }
this.props.value = oDate.format(this.props.format) this.props.value = oDate.format(this.props.format)
this.__INPUT__.firstElementChild.textContent = this.props.value this.__INPUT__.firstElementChild.textContent = this.props.value
if (needUpdateStyle) {
each(this.__DAYS__.children, (el, i) => {
if (this.props.last.day === this.calendar[i].day) {
this.calendar[i].picked = true
el.setAttribute('picked', '')
} else {
this.calendar[i].picked = false
el.removeAttribute('picked')
}
})
}
} }
_renderCalendar() { _renderCalendar() {
@ -361,85 +466,91 @@ export default class DatePicker {
this._renderCalendar() this._renderCalendar()
this.__INPUT__.addEventListener( this._activeFn = bind(this.__INPUT__, 'click', ev => {
'click', if (this.props.disabled || this.props.readonly || this.props.active) {
ev => { return
if (this.props.active) { }
this.props.active = true
let { x, y } = this.getBoundingClientRect()
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
50}px`
})
this._bubbleFn = ebind(this, 'click')
this._inactiveFn = bind(document, 'click', ev => {
this.__CALENDAR__.style.cssText = ''
this.props.active = false
})
this._ctrlFn = bind(this.__CTRL__, 'click', ev => {
let {
calendar: { year, month },
max,
min
} = this.props
if (ev.target.tagName === 'WC-ICON') {
let act = ev.target.is
// log(ev.target, act)
switch (act) {
case 'left':
month--
if (month < 0) {
month = 11
year--
}
break
case 'right':
month++
if (month > 11) {
month = 0
year++
}
break
case 'dbl-left':
year--
break
case 'dbl-right':
year++
break
}
if (isLimited({ max, min }, { year, month }) === true) {
return this._tips()
}
this.props.calendar.month = month
this.props.calendar.year = year
this._renderCalendar()
}
})
this._pickFn = bind(this.__DAYS__, 'click', ev => {
if (ev.target.tagName === 'SPAN') {
let { calendar, last } = this.props
let item = this.calendar[ev.target.dataset.idx]
if (
item.disabled ||
(last &&
calendar.year === last.year &&
calendar.month === last.month &&
item.day === last.day)
) {
return return
} }
this.props.active = true
let { x, y } = this.getBoundingClientRect() this._updateValue(item._, true)
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
this._inactiveFn()
}
})
}
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y + unmount() {
50}px` unbind(this.__INPUT__, 'click', this._activeFn)
}, unbind(this, 'click', this._bubbleFn)
false unbind(document, 'click', this._inactiveFn)
) unbind(this.__CTRL__, 'click', this._ctrlFn)
unbind(this.__DAYS__, 'click', this._pickFn)
this.addEventListener('click', ev => ev.stopPropagation(), false)
document.addEventListener(
'click',
ev => {
this.__CALENDAR__.style.cssText = ''
this.props.active = false
},
false
)
this.__CTRL__.addEventListener(
'click',
ev => {
let { year, month } = this.props.calendar
if (ev.target.tagName === 'WC-ICON') {
let act = ev.target.is
// log(ev.target, act)
switch (act) {
case 'left':
month--
if (month < 0) {
month = 11
year--
}
break
case 'right':
month++
if (month > 11) {
month = 0
year++
}
break
case 'dbl-left':
year--
break
case 'dbl-right':
year++
break
}
this.props.calendar.month = month
this.props.calendar.year = year
this._renderCalendar()
}
},
false
)
this.__DAYS__.addEventListener(
'click',
ev => {
if (ev.target.tagName === 'SPAN') {
let item = this.calendar[ev.target.dataset.idx]
log(item)
if (item.disabled) {
return
}
item.selected = true
}
},
false
)
} }
watch(name, old, val) { watch(name, old, val) {
@ -485,19 +596,12 @@ export default class DatePicker {
case 'value': case 'value':
this.value = val this.value = val
if (!this.props.calendar.year) {
this.props.calendar = {
year: this.props.pick.getFullYear(),
month: this.props.pick.getMonth()
}
}
this._renderCalendar()
break break
case 'readonly':
case 'disabled': case 'disabled':
if (val === '') { if (val === '') {
this.disabled = true this[name] = true
} }
break break
} }

View File

@ -9,6 +9,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
width: 100%;
.container { .container {
overflow: hidden; overflow: hidden;
@ -32,6 +33,7 @@
display: block; display: block;
border-radius: 3px; border-radius: 3px;
background: rgba(44, 47, 53, 0.25); background: rgba(44, 47, 53, 0.25);
cursor: default;
&:hover { &:hover {
background: rgba(44, 47, 53, 0.5); background: rgba(44, 47, 53, 0.5);

87
src/utils.js Normal file
View File

@ -0,0 +1,87 @@
/**
* 公共方法库
* @author yutent<yutent@doui.cc>
* @date 2019/08/08 10:47:55
*/
function noop() {}
/**
* 异步回调
*/
export const nextTick = (function() {
let queue = []
function callback() {
let n = queue.length
for (let i = 0; i < n; i++) {
queue[i]()
}
queue = queue.slice(n)
}
let node = document.createTextNode('<!-- -->')
new MutationObserver(callback).observe(node, { characterData: true })
let bool = false
return function(fn) {
queue.push(fn)
bool = !bool
node.data = bool
}
})()
/**
* 对象/数组遍历
* 支持跳出
*/
export const each = function(obj, fn) {
if (obj) {
if (Array.isArray(obj)) {
for (let i = 0, it; (it = obj[i++]); ) {
if (fn(it, i - 1) === false) {
break
}
}
} else {
for (let i in obj) {
if (obj.hasOwnProperty(i) && fn(obj[i], i) === false) {
break
}
}
}
}
}
/**
* 事件绑定
*/
export const bind = function(dom, type, fn = noop, phase = false) {
let events = type.split(',')
each(events, function(t) {
t = t.trim()
dom.addEventListener(t, fn, phase)
})
return fn
}
/**
* 事件绑定(默认不冒泡)
*/
export const ebind = function(dom, type, fn, phase) {
function fn2(ev) {
ev.stopPropagation()
fn && fn(ev)
}
return bind(dom, type, fn2, phase)
}
/**
* 解除事件绑定
*/
export const unbind = function(dom, type, fn = noop, phase = false) {
let events = type.split(',')
each(events, function(t) {
t = t.trim()
dom.removeEventListener(t, fn, phase)
})
}