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

优化组件外点击事件

old
宇天 2019-08-19 14:15:18 +08:00
parent 8dc0942cab
commit e3fd2190fd
4 changed files with 38 additions and 25 deletions

View File

@ -45,6 +45,7 @@ li {
textarea { textarea {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
width: 0;
height: 100%; height: 100%;
padding: 0 5px; padding: 0 5px;
border: 0; border: 0;
@ -61,8 +62,7 @@ li {
} }
} }
textarea { textarea {
width: 100%; padding: 5px 8px;
padding: 5px;
resize: none; resize: none;
} }
.prepend, .prepend,
@ -107,7 +107,7 @@ li {
padding: 8px 0; padding: 8px 0;
border-radius: 4px; border-radius: 4px;
background: #fff; background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
.list { .list {
width: 100%; width: 100%;
@ -221,7 +221,7 @@ li {
<script> <script>
import '../scroll/index' import '../scroll/index'
import '../icon/index' import '../icon/index'
import { nextTick, ebind, bind, unbind } from '../utils' import { ebind, bind, unbind, clickOutside } from '../utils'
const IS_FIREFOX = !!window.sidebar const IS_FIREFOX = !!window.sidebar
const TYPES = ['text', 'textarea', 'password'] const TYPES = ['text', 'textarea', 'password']
@ -458,9 +458,7 @@ export default class Input {
} }
}) })
this._bubbleFn = ebind(this, 'click') this._inactiveFn = clickOutside(this, ev => {
this._inactiveFn = bind(document, 'click', ev => {
this.__LIST__.classList.remove('show') this.__LIST__.classList.remove('show')
}) })
@ -478,8 +476,7 @@ export default class Input {
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(this, 'click', this._bubbleFn) unbind(document, 'mousedown', this._inactiveFn)
unbind(document, 'click', this._inactiveFn)
unbind(this.__LIST__, 'click', this._handleSelect) unbind(this.__LIST__, 'click', this._handleSelect)
} }

View File

@ -39,6 +39,7 @@
flex: 1; flex: 1;
width: 0; width: 0;
min-width: 64px; min-width: 64px;
width: 0;
height: 100%; height: 100%;
padding: 0 5px; padding: 0 5px;
border: 0; border: 0;
@ -99,7 +100,7 @@
padding: 8px 0; padding: 8px 0;
border-radius: 4px; border-radius: 4px;
background: #fff; background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
cursor: default; cursor: default;
.list { .list {
@ -209,8 +210,8 @@
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
} }
.icon { .arrow {
--size: 16px; --size: 12px;
} }
.prepend, .prepend,
.append { .append {
@ -222,7 +223,7 @@
<script> <script>
import '../scroll/index' import '../scroll/index'
import '../icon/index' import '../icon/index'
import { nextTick, ebind, bind, unbind } from '../utils' import { ebind, bind, unbind, clickOutside } from '../utils'
function parseOptions(arr, props) { function parseOptions(arr, props) {
let html = '' let html = ''
@ -407,9 +408,14 @@ export default class Select {
function initPos() { function initPos() {
var { x, y, width } = this.getBoundingClientRect() var { x, y, width } = this.getBoundingClientRect()
var size = this.getAttribute('size')
this.props.active = true this.props.active = true
this.__OPTG__.style.cssText = `left:${x}px;top:${y + if (size && size === 'mini') {
50}px;width:${width}px;` y += 32
} else {
y += 50
}
this.__OPTG__.style.cssText = `left:${x}px;top:${y}px;width:${width}px;`
} }
/* ---------------------------------------------------- */ /* ---------------------------------------------------- */
@ -454,8 +460,7 @@ export default class Select {
} }
}) })
this._bubbleFn = ebind(this, 'click') this._inactiveFn = clickOutside(this, ev => {
this._inactiveFn = bind(document, 'click', ev => {
this.__OPTG__.classList.toggle('show', false) this.__OPTG__.classList.toggle('show', false)
this.props.active = false this.props.active = false
}) })
@ -497,8 +502,7 @@ 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(this, 'click', this._bubbleFn) unbind(document, 'mousedown', this._inactiveFn)
unbind(document, 'click', this._inactiveFn)
unbind(this.__OPTG__, 'click', this._handleSelect) unbind(this.__OPTG__, 'click', this._handleSelect)
} }
} }

View File

@ -99,7 +99,7 @@
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background: #fff; background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
&::after { &::after {
position: absolute; position: absolute;
@ -225,7 +225,7 @@
<script> <script>
import '../icon/index' import '../icon/index'
import { nextTick, each, ebind, bind, unbind } from '../utils' import { nextTick, each, ebind, bind, unbind, clickOutside } from '../utils'
const today = new Date() const today = new Date()
@ -505,8 +505,7 @@ export default class DatePicker {
this.__CALENDAR__.classList.toggle('show') this.__CALENDAR__.classList.toggle('show')
}) })
this._bubbleFn = ebind(this, 'click') this._inactiveFn = clickOutside(this, ev => {
this._inactiveFn = bind(document, 'click', ev => {
this.__CALENDAR__.classList.toggle('show', false) this.__CALENDAR__.classList.toggle('show', false)
this.props.active = false this.props.active = false
}) })
@ -583,8 +582,7 @@ export default class DatePicker {
unmount() { unmount() {
unbind(this.__INPUT__, 'click', this._activeFn) unbind(this.__INPUT__, 'click', this._activeFn)
unbind(this, 'click', this._bubbleFn) unbind(document, 'mousedown', this._inactiveFn)
unbind(document, 'click', this._inactiveFn)
unbind(this.__CTRL__, 'click', this._ctrlFn) unbind(this.__CTRL__, 'click', this._ctrlFn)
unbind(this.__DAYS__, 'click', this._pickFn) unbind(this.__DAYS__, 'click', this._pickFn)
} }

View File

@ -85,3 +85,17 @@ export const unbind = function(dom, type, fn = noop, phase = false) {
dom.removeEventListener(t, fn, phase) dom.removeEventListener(t, fn, phase)
}) })
} }
// 指定节点外点击(最高不能超过body层)
export const clickOutside = function(dom, fn = noop) {
return bind(document, 'mousedown', ev => {
if (ev) {
var target = ev.target
if (dom === target || dom.contains(target)) {
return
}
fn(ev)
}
})
}