* docs(tooltip): fixed a typo in comment

* fix(slider): fixed a slider button bug (#1029) (#1046)

fixed an issue where slider button still moves upon mouseleave on tooltip
This commit is contained in:
serializedowen 2020-12-23 16:59:05 +08:00 committed by GitHub
parent 61f8317fa1
commit 169c352436
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 7 deletions

View File

@ -2,7 +2,7 @@
<div <div
ref="button" ref="button"
class="el-slider__button-wrapper" class="el-slider__button-wrapper"
:class="{ 'hover': hovering, 'dragging': dragging }" :class="{ hover: hovering, dragging: dragging }"
:style="wrapperStyle" :style="wrapperStyle"
tabindex="0" tabindex="0"
@mouseenter="handleMouseEnter" @mouseenter="handleMouseEnter"
@ -20,6 +20,7 @@
ref="tooltip" ref="tooltip"
v-model="tooltipVisible" v-model="tooltipVisible"
placement="top" placement="top"
:stop-popper-mouse-event="false"
:popper-class="tooltipClass" :popper-class="tooltipClass"
:disabled="!showTooltip" :disabled="!showTooltip"
manual manual
@ -27,7 +28,10 @@
<template #content> <template #content>
<span>{{ formatValue }}</span> <span>{{ formatValue }}</span>
</template> </template>
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div> <div
class="el-slider__button"
:class="{ hover: hovering, dragging: dragging }"
></div>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
@ -63,7 +67,6 @@ export default defineComponent({
emits: [UPDATE_MODEL_EVENT], emits: [UPDATE_MODEL_EVENT],
setup(props, { emit }) { setup(props, { emit }) {
const initData = reactive({ const initData = reactive({
hovering: false, hovering: false,
dragging: false, dragging: false,
@ -91,10 +94,7 @@ export default defineComponent({
setPosition, setPosition,
} = useSliderButton(props, initData, emit) } = useSliderButton(props, initData, emit)
const { const { hovering, dragging } = toRefs(initData)
hovering,
dragging,
} = toRefs(initData)
return { return {
tooltip, tooltip,

View File

@ -92,6 +92,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
stopPopperMouseEvent: {
type: Boolean,
default: true,
},
}, },
emits: [UPDATE_MODEL_EVENT], emits: [UPDATE_MODEL_EVENT],
setup(props, ctx) { setup(props, ctx) {
@ -134,6 +138,7 @@ export default defineComponent({
transition, transition,
trigger, trigger,
visibleArrow, visibleArrow,
stopPopperMouseEvent,
} = this } = this
const popper = h( const popper = h(
ElPopper, ElPopper,
@ -150,6 +155,7 @@ export default defineComponent({
placement, placement,
showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability, showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability,
showArrow: visibleArrow, showArrow: visibleArrow,
stopPopperMouseEvent,
transition, transition,
trigger, trigger,
popperOptions, // Breakings!: Once popperOptions is provided, the whole popper is under user's control, ElPopper nolonger generates the default options for popper, this is by design if the user wants the full control on @PopperJS, read the doc @https://popper.js.org/docs/v2/ popperOptions, // Breakings!: Once popperOptions is provided, the whole popper is under user's control, ElPopper nolonger generates the default options for popper, this is by design if the user wants the full control on @PopperJS, read the doc @https://popper.js.org/docs/v2/