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
Code Issues Pull Requests Wiki Activity

更新utils

old
宇天 2019-12-19 01:04:15 +08:00
parent f546cf488c
commit 2fd6d6a07a
17 changed files with 243 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.dev.js
View File

@ -49,7 +49,7 @@ function fixImport(str) {
return str return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"') .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
.replace( .replace(
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g, /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"' 'import $1 from "$2.js"'
) )
} }

2
build.prod.js
View File

@ -49,7 +49,7 @@ function fixImport(str) {
return str return str
.replace(/import '([\w-/_.]*)'/g, 'import "$1.js"') .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
.replace( .replace(
/import ([\w\s,{}]*) from '([a-z0-9\/\.\-_]*)'/g, /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g,
'import $1 from "$2.js"' 'import $1 from "$2.js"'
) )
} }

22
src/drag/core.js
View File

@ -6,7 +6,7 @@
'use strict' 'use strict'
import { bind, unbind } from '../utils' import $ from '../utils'
const DEF_OPT = { const DEF_OPT = {
axis: '', // x | y | xy 拖拽方向 axis: '', // x | y | xy 拖拽方向
@ -41,10 +41,10 @@ export default class Drag {
// 鼠标状态图标 // 鼠标状态图标
node.style.cursor = 'move' node.style.cursor = 'move'
this._handleResize = bind(window, 'resize', this._init.bind(this)) this._handleResize = $.bind(window, 'resize', this._init.bind(this))
// let // let
this._handleMousedown = bind(node, 'mousedown', ev => { this._handleMousedown = $.bind(node, 'mousedown', ev => {
if (this.disabled) { if (this.disabled) {
return return
} }
@ -74,7 +74,7 @@ export default class Drag {
limit = [pbcr.top, pbcr.right - tw, pbcr.bottom - th, pbcr.left] limit = [pbcr.top, pbcr.right - tw, pbcr.bottom - th, pbcr.left]
} }
let handleMove = bind(document, 'mousemove', ev => { let handleMove = $.bind(document, 'mousemove', ev => {
// 防止拖动到边缘时导致页面滚动 // 防止拖动到边缘时导致页面滚动
ev.preventDefault() ev.preventDefault()
@ -119,7 +119,7 @@ export default class Drag {
this.$elem.style.transform = `translate(${_x}px, ${_y}px)` this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
}) })
let handleUp = bind(document, 'mouseup', ev => { let handleUp = $.bind(document, 'mouseup', ev => {
this.$elem.dispatchEvent( this.$elem.dispatchEvent(
new CustomEvent('dragged', { new CustomEvent('dragged', {
detail: { detail: {
@ -131,8 +131,8 @@ export default class Drag {
} }
}) })
) )
unbind(document, 'mousemove', handleMove) $.unbind(document, 'mousemove', handleMove)
unbind(document, 'mouseup', handleUp) $.unbind(document, 'mouseup', handleUp)
}) })
}) })
@ -143,16 +143,16 @@ export default class Drag {
if (!name || typeof cb !== 'function') { if (!name || typeof cb !== 'function') {
return return
} }
return bind(this, name, cb) return $.bind(this, name, cb)
} }
off(name, cb) { off(name, cb) {
unbind(this, name, cb) $.unbind(this, name, cb)
} }
destroy() { destroy() {
unbind(window, 'resize', this._handleResize) $.unbind(window, 'resize', this._handleResize)
unbind(this.$drag, 'mousedown', this._handleMousedown) $.unbind(this.$drag, 'mousedown', this._handleMousedown)
delete this.$elem delete this.$elem
delete this.$drag delete this.$drag

12
src/form/button.wc
View File

@ -249,6 +249,8 @@
<script> <script>
import '../icon/index' import '../icon/index'
import $ from '../utils'
const IS_FIREFOX = !!window.sidebar const IS_FIREFOX = !!window.sidebar
export default class Button { export default class Button {
@ -313,19 +315,17 @@ export default class Button {
} }
mounted() { mounted() {
this._handleClick = ev => {
if (this.props.loading || this.props.disabled) {
// 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制 // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
ev.stopPropagation() this._handleClick = $.catch(this.__BTN__, 'click', ev => {
if (this.props.loading || this.props.disabled) {
return return
} }
this.dispatchEvent(new CustomEvent('active')) this.dispatchEvent(new CustomEvent('active'))
} })
this.__BTN__.addEventListener('click', this._handleClick, false)
} }
unmount() { unmount() {
this.__BTN__.removeEventListener('click', this._handleClick) $.unbind(this.__BTN__, 'click', this._handleClick)
} }
watch() { watch() {

6
src/form/checkbox.wc
View File

@ -142,7 +142,7 @@
<script> <script>
import '../icon/index' import '../icon/index'
import { bind, unbind } from '../utils' import $ from '../utils'
export default class Checkbox { export default class Checkbox {
props = { props = {
@ -237,7 +237,7 @@ export default class Checkbox {
} }
mounted() { mounted() {
this._handlClick = bind(this, 'click', ev => { this._handlClick = $.bind(this, 'click', ev => {
ev.preventDefault() ev.preventDefault()
if (!this.disabled && !this.readonly) { if (!this.disabled && !this.readonly) {
@ -248,7 +248,7 @@ export default class Checkbox {
} }
unmount() { unmount() {
unbind(this, 'click', this._handlClick) $.unbind(this, 'click', this._handlClick)
} }
watch() { watch() {

24
src/form/input.wc
View File

@ -231,7 +231,7 @@ li {
<script> <script>
import '../scroll/index' import '../scroll/index'
import '../icon/index' import '../icon/index'
import { ebind, bind, unbind, clickOutside } from '../utils' import $ from '../utils'
const TYPES = ['text', 'textarea', 'password'] const TYPES = ['text', 'textarea', 'password']
const INPUTS = { const INPUTS = {
@ -398,7 +398,7 @@ export default class Input {
var { type } = this.props var { type } = this.props
// 键盘事件 // 键盘事件
this._handleSubmit = ebind(this.__INPUT__, 'keydown', ev => { this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) { if (this.disabled || this.readonly) {
return return
} }
@ -433,7 +433,7 @@ export default class Input {
// 非textarea, 可做输入建议功能 // 非textarea, 可做输入建议功能
if (type === 'text') { if (type === 'text') {
// 输入状态事件 // 输入状态事件
this._handleChange = bind(this.__INPUT__, 'input', ev => { this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
ev.preventDefault() ev.preventDefault()
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('fetch-suggest', { new CustomEvent('fetch-suggest', {
@ -449,7 +449,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.props
let { x, y, width } = this.getBoundingClientRect() let { x, y, width } = this.getBoundingClientRect()
if (list && list.length) { if (list && list.length) {
@ -465,28 +465,28 @@ export default class Input {
} }
}) })
this._inactiveFn = clickOutside(this, ev => { this._inactiveFn = $.outside(this, ev => {
this.__LIST__.classList.remove('show') this.__LIST__.classList.remove('show')
}) })
// 选择建议 // 选择建议
this._handleSelect = bind(this.__LIST__, 'click', ev => { this._handleSelect = $.bind(this.__LIST__, 'click', ev => {
if (ev.target.tagName === 'LI') { if (ev.target.tagName === 'LI') {
this._fetchSelect(ev.target.dataset.idx, ev) this._fetchSelect(ev.target.dataset.idx, ev)
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
} }
}) })
} else { } else {
this._handleWheel = ebind(this.__INPUT__, 'wheel') this._handleWheel = $.catch(this.__INPUT__, 'wheel')
} }
} }
unmount() { unmount() {
unbind(this.__INPUT__, 'wheel', this._handleWheel) $.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(document, 'mousedown', this._inactiveFn) $.unbind(this.__LIST__, 'click', this._handleSelect)
unbind(this.__LIST__, 'click', this._handleSelect) $.clearOutside(this._inactiveFn)
} }
watch() { watch() {

10
src/form/number.wc
View File

@ -173,7 +173,7 @@
<script> <script>
import '../scroll/index' import '../scroll/index'
import '../icon/index' import '../icon/index'
import { ebind, bind, unbind } from '../utils' import $ from '../utils'
export default class Number { export default class Number {
props = { props = {
@ -283,7 +283,7 @@ export default class Number {
mounted() { mounted() {
// 键盘事件 // 键盘事件
this._handleSubmit = ebind(this.__INPUT__, 'keydown', ev => { this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) { if (this.disabled || this.readonly) {
return return
} }
@ -304,7 +304,7 @@ export default class Number {
} }
}) })
this._handleChange = ebind(this.__INPUT__, 'change', ev => { this._handleChange = $.catch(this.__INPUT__, 'change', ev => {
if (isFinite(this.__INPUT__.value)) { if (isFinite(this.__INPUT__.value)) {
this.props.value = +this.__INPUT__.value this.props.value = +this.__INPUT__.value
if (!this.__INPUT__.value.endsWith('.')) { if (!this.__INPUT__.value.endsWith('.')) {
@ -316,7 +316,7 @@ export default class Number {
this.dispatchEvent(new CustomEvent('input')) 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
} }
@ -331,7 +331,7 @@ export default class Number {
} }
unmount() { unmount() {
unbind(this.__INPUT__, 'keydown', this._handleSubmit) $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
} }
watch() { watch() {

6
src/form/radio.wc
View File

@ -159,7 +159,7 @@
</style> </style>
<script> <script>
import { bind, unbind } from '../utils' import $ from '../utils'
export default class Radio { export default class Radio {
props = { props = {
@ -230,7 +230,7 @@ export default class Radio {
} }
mounted() { mounted() {
this._handleClick = bind(this, 'click', ev => { this._handleClick = $.bind(this, 'click', ev => {
if (!this.disabled && !this.readonly && !this.checked) { if (!this.disabled && !this.readonly && !this.checked) {
this.checked = true this.checked = true
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
@ -239,7 +239,7 @@ export default class Radio {
} }
unmount() { unmount() {
unbind(this, 'click', this._handleClick) $.unbind(this, 'click', this._handleClick)
} }
watch() { watch() {

18
src/form/select.wc
View File

@ -224,7 +224,7 @@
<script> <script>
import '../scroll/index' import '../scroll/index'
import '../icon/index' import '../icon/index'
import { ebind, bind, unbind, clickOutside } from '../utils' import $ from '../utils'
function parseOptions(arr, props) { function parseOptions(arr, props) {
let html = '' let html = ''
@ -423,7 +423,7 @@ export default class Select {
/* ---------------------------------------------------- */ /* ---------------------------------------------------- */
// 键盘事件 // 键盘事件
this._handleKeydown = ebind(this.__INPUT__, 'keydown', ev => { this._handleKeydown = $.catch(this.__INPUT__, 'keydown', ev => {
if (this.disabled || this.readonly) { if (this.disabled || this.readonly) {
return return
} }
@ -445,7 +445,7 @@ export default class Select {
}) })
// 渲染列表 // 渲染列表
this._activeFn = bind(this.__INPUT__, 'click', ev => { this._activeFn = $.bind(this.__INPUT__, 'click', ev => {
var { options } = this.props var { options } = this.props
initPos.call(this) initPos.call(this)
@ -453,14 +453,14 @@ export default class Select {
}) })
// 选择选项 // 选择选项
this._handleSelect = bind(this.__OPTG__, 'click', ev => { this._handleSelect = $.bind(this.__OPTG__, 'click', ev => {
if (ev.target.tagName === 'DD' && !ev.target.hasAttribute('disabled')) { if (ev.target.tagName === 'DD' && !ev.target.hasAttribute('disabled')) {
this._fetchSelect(+ev.target.dataset.idx, true) this._fetchSelect(+ev.target.dataset.idx, true)
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
} }
}) })
this._inactiveFn = clickOutside(this, ev => { this._inactiveFn = $.outside(this, ev => {
this.__OPTG__.classList.toggle('show', false) this.__OPTG__.classList.toggle('show', false)
this.props.active = false this.props.active = false
}) })
@ -495,10 +495,10 @@ export default class Select {
} }
unmount() { unmount() {
unbind(this.__INPUT__, 'keydown', this._handleKeydown) $.unbind(this.__INPUT__, 'keydown', this._handleKeydown)
unbind(this.__INPUT__, 'click', this._activeFn) $.unbind(this.__INPUT__, 'click', this._activeFn)
unbind(document, 'mousedown', this._inactiveFn) $.unbind(this.__OPTG__, 'click', this._handleSelect)
unbind(this.__OPTG__, 'click', this._handleSelect) $.clearOutside(this._inactiveFn)
} }
} }
</script> </script>

8
src/form/star.wc
View File

@ -87,7 +87,7 @@ label {
</style> </style>
<script> <script>
import { ebind, bind, unbind } from '../utils' import $ from '../utils'
export default class Star { export default class Star {
props = { props = {
@ -186,7 +186,7 @@ export default class Star {
} }
mounted() { mounted() {
ebind(this.__BOX__, 'mousemove', ev => { $.catch(this.__BOX__, 'mousemove', ev => {
if (this.props.disabled) { if (this.props.disabled) {
return return
} }
@ -196,7 +196,7 @@ export default class Star {
} }
}) })
ebind(this.__BOX__, 'click', ev => { $.catch(this.__BOX__, 'click', ev => {
var { tmp, disabled } = this.props var { tmp, disabled } = this.props
if (disabled) { if (disabled) {
return return
@ -207,7 +207,7 @@ export default class Star {
} }
}) })
ebind(this.__BOX__, 'mouseleave', ev => { $.catch(this.__BOX__, 'mouseleave', ev => {
if (this.props.disabled) { if (this.props.disabled) {
return return
} }

6
src/form/switch.wc
View File

@ -108,7 +108,7 @@
</style> </style>
<script> <script>
import { bind, unbind } from '../utils' import $ from '../utils'
export default class Switch { export default class Switch {
props = { props = {
'active-text': null, 'active-text': null,
@ -159,7 +159,7 @@ export default class Switch {
} }
mounted() { mounted() {
this._handleClick = bind(this, 'click', ev => { this._handleClick = $.bind(this, 'click', ev => {
if (this.disabled) { if (this.disabled) {
return return
} }
@ -178,7 +178,7 @@ export default class Switch {
} }
unmount() { unmount() {
unbind(this, 'click', this._handleClick) $.unbind(this, 'click', this._handleClick)
} }
watch() { watch() {

14
src/layer/index.wc
View File

@ -239,7 +239,7 @@
import '../form/input' import '../form/input'
import Drag from '../drag/core' import Drag from '../drag/core'
import { nextTick, bind, unbind, clickOutside } from '../utils' import $ from '../utils'
const LANGUAGES = { const LANGUAGES = {
en: { en: {
@ -456,7 +456,7 @@ class Layer {
this.type = this.props.type this.type = this.props.type
this.title = this.props.title this.title = this.props.title
this._handleBtnClick = bind(this.__CTRL__, 'click', ev => { this._handleBtnClick = $.bind(this.__CTRL__, 'click', ev => {
if (ev.target.tagName === 'BUTTON') { if (ev.target.tagName === 'BUTTON') {
var idx = +ev.target.dataset.idx var idx = +ev.target.dataset.idx
var { type } = this.props var { type } = this.props
@ -487,7 +487,7 @@ class Layer {
if (this.props.type === 'prompt') { if (this.props.type === 'prompt') {
this.__INPUT__ = this.__BODY__.firstElementChild.assignedNodes().pop() this.__INPUT__ = this.__BODY__.firstElementChild.assignedNodes().pop()
this._handleSubmit = bind(this.__INPUT__, 'submit', ev => { this._handleSubmit = $.bind(this.__INPUT__, 'submit', ev => {
this._intercept(ev.detail) this._intercept(ev.detail)
}) })
} }
@ -502,7 +502,7 @@ class Layer {
/* ---- 额外的样式 --- */ /* ---- 额外的样式 --- */
/* ------------------------ */ /* ------------------------ */
if (this.props.mask) { if (this.props.mask) {
this._handlMask = clickOutside(this.root.children[1], ev => { this._handlMask = $.outside(this.root.children[1], ev => {
// 只作用于当前wc-layer // 只作用于当前wc-layer
if (ev.target !== this) { if (ev.target !== this) {
return return
@ -572,7 +572,7 @@ class Layer {
} }
if (this.props.type === 'notify') { if (this.props.type === 'notify') {
this._handleClose = bind(this.__TITLE__, 'click', ev => { this._handleClose = $.bind(this.__TITLE__, 'click', ev => {
if (ev.target.tagName === 'WC-ICON') { if (ev.target.tagName === 'WC-ICON') {
this.close() this.close()
} }
@ -581,8 +581,8 @@ class Layer {
} }
unmount() { unmount() {
unbind(document, 'mousedown', this._handlMask) $.clearOutside(this._handlMask)
unbind(this.__TITLE__, 'click', this._handleClose) $.unbind(this.__TITLE__, 'click', this._handleClose)
} }
watch() { watch() {

30
src/neditor/index.wc
View File

@ -225,7 +225,7 @@ wc-scroll {
import ICONS from './svg' import ICONS from './svg'
import '../form/input' import '../form/input'
import '../form/button' import '../form/button'
import { clickOutside, bind, ebind, unbind } from '../utils' import $ from '../utils'
const ACTTION = { const ACTTION = {
bold: 'bold', bold: 'bold',
@ -371,7 +371,7 @@ export default class Neditor {
const FILE_INPUT = this.__TOOLBAR__.querySelector('input') const FILE_INPUT = this.__TOOLBAR__.querySelector('input')
if (FILE_INPUT) { if (FILE_INPUT) {
bind(FILE_INPUT, 'change', ev => { $.bind(FILE_INPUT, 'change', ev => {
this._handleImage(FILE_INPUT.files[0]) this._handleImage(FILE_INPUT.files[0])
}) })
} }
@ -379,7 +379,7 @@ export default class Neditor {
/* ------------------------------ */ /* ------------------------------ */
// 工具栏点击事件 // 工具栏点击事件
this._toolFn = bind(this.__TOOLBAR__, 'click', ev => { this._toolFn = $.bind(this.__TOOLBAR__, 'click', ev => {
this.restoreSelection() this.restoreSelection()
if (ev.target === ev.currentTarget) { if (ev.target === ev.currentTarget) {
return return
@ -436,7 +436,7 @@ export default class Neditor {
}) })
// 字体大小设置 // 字体大小设置
this._fontFn = bind(this.__FONT__, 'click', ev => { this._fontFn = $.bind(this.__FONT__, 'click', ev => {
if (ev.target === ev.currentTarget) { if (ev.target === ev.currentTarget) {
return return
} }
@ -448,7 +448,7 @@ export default class Neditor {
}) })
// 颜色 // 颜色
this._colorFn = bind(this.__COLOR__, 'click', ev => { this._colorFn = $.bind(this.__COLOR__, 'click', ev => {
if (ev.target === ev.currentTarget) { if (ev.target === ev.currentTarget) {
return return
} }
@ -460,7 +460,7 @@ export default class Neditor {
}) })
// 超链接 // 超链接
this.__linkFn = bind(this.__LINK_BTN__, 'active', ev => { this.__linkFn = $.bind(this.__LINK_BTN__, 'active', ev => {
if (LINK_INPUT.value) { if (LINK_INPUT.value) {
this.__LINK__.classList.remove('fadein') this.__LINK__.classList.remove('fadein')
this.__EDITOR__.focus() this.__EDITOR__.focus()
@ -472,18 +472,18 @@ export default class Neditor {
}) })
//监听鼠标事件的,以缓存选中状态 //监听鼠标事件的,以缓存选中状态
this.__mouseFn = bind(this.__EDITOR__, 'mouseleave', ev => { this.__mouseFn = $.bind(this.__EDITOR__, 'mouseleave', ev => {
this.saveSelection() this.saveSelection()
}) })
clickOutside(this, ev => { $.outside(this, ev => {
this.__FONT__.classList.remove('fadein') this.__FONT__.classList.remove('fadein')
this.__COLOR__.classList.remove('fadein') this.__COLOR__.classList.remove('fadein')
this.__LINK__.classList.remove('fadein') this.__LINK__.classList.remove('fadein')
}) })
// 粘贴板事件 // 粘贴板事件
this.__pasteFn = bind(this.__EDITOR__, 'paste', ev => { this.__pasteFn = $.bind(this.__EDITOR__, 'paste', ev => {
ev.preventDefault() ev.preventDefault()
var html = ev.clipboardData.getData('text/html') var html = ev.clipboardData.getData('text/html')
@ -539,12 +539,12 @@ export default class Neditor {
} }
unmount() { unmount() {
unbind(this.__TOOLBAR__, 'click', this.__toolFn) $.unbind(this.__TOOLBAR__, 'click', this.__toolFn)
unbind(this.__FONT__, 'click', this.__fontFn) $.unbind(this.__FONT__, 'click', this.__fontFn)
unbind(this.__COLOR__, 'click', this.__colorFn) $.unbind(this.__COLOR__, 'click', this.__colorFn)
unbind(this.__LINK_BTN__, 'click', this.__linkFn) $.unbind(this.__LINK_BTN__, 'click', this.__linkFn)
unbind(this.__EDITOR__, 'mouseleave', this.__mouseFn) $.unbind(this.__EDITOR__, 'mouseleave', this.__mouseFn)
unbind(this.__EDITOR__, 'paste', this.__pasteFn) $.unbind(this.__EDITOR__, 'paste', this.__pasteFn)
this.__observer.disconnect() this.__observer.disconnect()
} }

10
src/pager/index.wc
View File

@ -88,6 +88,8 @@
</style> </style>
<script> <script>
import $ from '../utils'
// 计算页码 // 计算页码
function calculate(curr, total, simple) { function calculate(curr, total, simple) {
var arr = [] var arr = []
@ -167,9 +169,7 @@ export default class Pager {
this.update() this.update()
this.__LAYOUT__.addEventListener( $.bind(this.__LAYOUT__, 'click', ev => {
'click',
ev => {
if (ev.target.tagName === 'BUTTON') { if (ev.target.tagName === 'BUTTON') {
var { curr, totalpage } = this.props var { curr, totalpage } = this.props
var page = ev.target.dataset.page var page = ev.target.dataset.page
@ -208,9 +208,7 @@ export default class Pager {
}) })
) )
} }
}, })
false
)
} }
watch() { watch() {

24
src/picker/date.wc
View File

@ -224,7 +224,7 @@
<script> <script>
import '../icon/index' import '../icon/index'
import { nextTick, each, ebind, bind, unbind, clickOutside } from '../utils' import $ from '../utils'
const today = new Date() const today = new Date()
@ -382,7 +382,7 @@ export default class DatePicker {
this.props.calendar = { ...last, list: [] } this.props.calendar = { ...last, list: [] }
} }
this._renderCalendar() this._renderCalendar()
nextTick(_ => this.dispatchEvent(new CustomEvent('input'))) $.nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
} }
get readonly() { get readonly() {
@ -499,7 +499,7 @@ export default class DatePicker {
if (needUpdateStyle) { if (needUpdateStyle) {
var list = this.props.calendar.list var list = this.props.calendar.list
each(this.__DAYS__.children, (el, i) => { $.each(this.__DAYS__.children, (el, i) => {
if (this.props.last.day === list[i].day) { if (this.props.last.day === list[i].day) {
list[i].picked = true list[i].picked = true
el.setAttribute('picked', '') el.setAttribute('picked', '')
@ -541,7 +541,7 @@ export default class DatePicker {
this._fixedRenderDate() this._fixedRenderDate()
this._activeFn = bind(this.__INPUT__, 'click', ev => { this._activeFn = $.bind(this.__INPUT__, 'click', ev => {
if (this.props.disabled || this.props.readonly) { if (this.props.disabled || this.props.readonly) {
return return
} }
@ -553,12 +553,12 @@ export default class DatePicker {
this.__CALENDAR__.classList.toggle('show') this.__CALENDAR__.classList.toggle('show')
}) })
this._inactiveFn = clickOutside(this, ev => { this._inactiveFn = $.outside(this, ev => {
this.__CALENDAR__.classList.toggle('show', false) this.__CALENDAR__.classList.toggle('show', false)
this.props.active = false this.props.active = false
}) })
this._ctrlFn = bind(this.__CTRL__, 'click', ev => { this._ctrlFn = $.bind(this.__CTRL__, 'click', ev => {
let { let {
calendar: { year, month }, calendar: { year, month },
max, max,
@ -598,7 +598,7 @@ export default class DatePicker {
} }
}) })
this._pickFn = bind(this.__DAYS__, 'click', ev => { this._pickFn = $.bind(this.__DAYS__, 'click', ev => {
if (ev.target.tagName === 'SPAN') { if (ev.target.tagName === 'SPAN') {
let { calendar, last } = this.props let { calendar, last } = this.props
let item = calendar.list[ev.target.dataset.idx] let item = calendar.list[ev.target.dataset.idx]
@ -617,7 +617,7 @@ export default class DatePicker {
} }
this._updateValue(item._, true) this._updateValue(item._, true)
nextTick(_ => this.dispatchEvent(new CustomEvent('input'))) $.nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('pick', { new CustomEvent('pick', {
detail: { value: this.value, _: item._ } detail: { value: this.value, _: item._ }
@ -629,10 +629,10 @@ export default class DatePicker {
} }
unmount() { unmount() {
unbind(this.__INPUT__, 'click', this._activeFn) $.unbind(this.__INPUT__, 'click', this._activeFn)
unbind(document, 'mousedown', this._inactiveFn) $.unbind(this.__DAYS__, 'click', this._pickFn)
unbind(this.__CTRL__, 'click', this._ctrlFn) $.unbind(this.__CTRL__, 'click', this._ctrlFn)
unbind(this.__DAYS__, 'click', this._pickFn) $.clearOutside(this._inactiveFn)
} }
watch() { watch() {

26
src/scroll/index.wc
View File

@ -76,7 +76,7 @@
</style> </style>
<script> <script>
import { bind, ebind, unbind } from '../utils' import $ from '../utils'
// 是否火狐浏览器 // 是否火狐浏览器
const IS_FF = !!window.sidebar const IS_FF = !!window.sidebar
@ -157,7 +157,7 @@ export default class Scroll {
mounted() { mounted() {
// 初始化滚动条的位置和长度 // 初始化滚动条的位置和长度
this._initFn = bind(this.__BOX__, 'mouseenter', ev => { this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
var ow = this.__BOX__.offsetWidth var ow = this.__BOX__.offsetWidth
var sw = this.__BOX__.scrollWidth var sw = this.__BOX__.scrollWidth
var oh = this.__BOX__.offsetHeight var oh = this.__BOX__.offsetHeight
@ -193,7 +193,7 @@ export default class Scroll {
}) })
// 鼠标滚动事件 // 鼠标滚动事件
this._wheelFn = ebind(this.__BOX__, 'wheel', ev => { this._wheelFn = $.catch(this.__BOX__, 'wheel', ev => {
ev.preventDefault() ev.preventDefault()
var { sh, oh, yh, sw, ow, xw } = this.props var { sh, oh, yh, sw, ow, xw } = this.props
@ -261,26 +261,26 @@ export default class Scroll {
startY = null startY = null
this.props.thumbX = moveX this.props.thumbX = moveX
this.props.thumbY = moveY this.props.thumbY = moveY
unbind(document, 'mousemove', mousemoveFn) $.unbind(document, 'mousemove', mousemoveFn)
unbind(document, 'mouseup', mouseupFn) $.unbind(document, 'mouseup', mouseupFn)
} }
bind(this.__Y__, 'mousedown', ev => { $.bind(this.__Y__, 'mousedown', ev => {
startY = ev.pageY startY = ev.pageY
if (!this.props.thumbY) { if (!this.props.thumbY) {
this.props.thumbY = 0 this.props.thumbY = 0
} }
bind(document, 'mousemove', mousemoveFn) $.bind(document, 'mousemove', mousemoveFn)
bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
bind(this.__X__, 'mousedown', ev => { $.bind(this.__X__, 'mousedown', ev => {
startX = ev.pageX startX = ev.pageX
if (!this.props.thumbX) { if (!this.props.thumbX) {
this.props.thumbX = 0 this.props.thumbX = 0
} }
bind(document, 'mousemove', mousemoveFn) $.bind(document, 'mousemove', mousemoveFn)
bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
this.__observer = new MutationObserver(this._initFn) this.__observer = new MutationObserver(this._initFn)
@ -293,8 +293,8 @@ export default class Scroll {
unmount() { unmount() {
this.__observer.disconnect() this.__observer.disconnect()
unbind(this.__BOX__, 'mouseenter', this._initFn) $.unbind(this.__BOX__, 'mouseenter', this._initFn)
unbind(this.__BOX__, 'wheel', this._wheelFn) $.unbind(this.__BOX__, 'wheel', this._wheelFn)
} }
} }
</script> </script>

35
src/utils.js
View File

@ -6,10 +6,11 @@
function noop() {} function noop() {}
export default {
/** /**
* 异步回调 * 异步回调
*/ */
export const nextTick = (function() { nextTick: (function() {
let queue = [] let queue = []
function callback() { function callback() {
let n = queue.length let n = queue.length
@ -28,13 +29,13 @@ export const nextTick = (function() {
bool = !bool bool = !bool
node.data = bool node.data = bool
} }
})() })(),
/** /**
* 对象/数组遍历 * 对象/数组遍历
* 支持跳出 * 支持跳出
*/ */
export const each = function(obj, fn) { each(obj, fn) {
if (obj) { if (obj) {
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
for (let i = 0, it; (it = obj[i++]); ) { for (let i = 0, it; (it = obj[i++]); ) {
@ -50,45 +51,45 @@ export const each = function(obj, fn) {
} }
} }
} }
} },
/** /**
* 事件绑定 * 事件绑定
*/ */
export const bind = function(dom, type, fn = noop, phase = false) { bind(dom, type, fn = noop, phase = false) {
let events = type.split(',') let events = type.split(',')
each(events, function(t) { this.each(events, function(t) {
t = t.trim() t = t.trim()
dom.addEventListener(t, fn, phase) dom.addEventListener(t, fn, phase)
}) })
return fn return fn
} },
/** /**
* 事件绑定(默认不冒泡) * 事件绑定(默认不冒泡)
*/ */
export const ebind = function(dom, type, fn, phase) { catch(dom, type, fn, phase) {
function fn2(ev) { function fn2(ev) {
ev.stopPropagation() ev.stopPropagation()
fn && fn(ev) fn && fn(ev)
} }
return bind(dom, type, fn2, phase) return this.bind(dom, type, fn2, phase)
} },
/** /**
* 解除事件绑定 * 解除事件绑定
*/ */
export const unbind = function(dom, type, fn = noop, phase = false) { unbind(dom, type, fn = noop, phase = false) {
let events = type.split(',') let events = type.split(',')
each(events, function(t) { this.each(events, function(t) {
t = t.trim() t = t.trim()
dom.removeEventListener(t, fn, phase) dom.removeEventListener(t, fn, phase)
}) })
} },
// 指定节点外点击(最高不能超过body层) // 指定节点外点击(最高不能超过body层)
export const clickOutside = function(dom, fn = noop) { outside(dom, fn = noop) {
return bind(document, 'mousedown', ev => { return this.bind(document, 'mousedown', ev => {
if (ev) { if (ev) {
if (ev.path) { if (ev.path) {
var path = ev.path.concat() var path = ev.path.concat()
@ -110,4 +111,8 @@ export const clickOutside = function(dom, fn = noop) {
} }
fn(ev) fn(ev)
}) })
},
clearOutside(fn = noop) {
this.unbind(document, 'mousedown', fn)
}
} }