优化组件外点击事件
parent
8dc0942cab
commit
e3fd2190fd
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
14
src/utils.js
14
src/utils.js
|
@ -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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
Reference in New Issue