theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛[修复bug]解决slider组件在拉拽时，tooltip不显示的问题

Browse Source
This commit is contained in:
须弥 2022-02-09 16:27:46 +08:00
parent f9dcbd986f
commit 5885677793
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/component/slider/index.vue
View File

@ -6,14 +6,19 @@
class="layui-slider-vrange" class="layui-slider-vrange"
v-if="range" v-if="range"
> >
<div <lay-tooltip :content="'' + verticalRangeValue[1]" :is-can-hide="tooptipHide">
:style="{ bottom: verticalRangeValue[1] + '%' }" <div
class="layui-slider-vertical-btn" :style="{ bottom: verticalRangeValue[1] + '%' }"
></div> class="layui-slider-vertical-btn"
<div ></div>
:style="{ bottom: verticalRangeValue[0] + '%' }" </lay-tooltip>
class="layui-slider-vertical-btn" <lay-tooltip :content="'' + verticalRangeValue[0]" :is-can-hide="tooptipHide">
></div> <div
:style="{ bottom: verticalRangeValue[0] + '%' }"
class="layui-slider-vertical-btn"
></div>
</lay-tooltip>
<div class="layui-slider-vertical-line"></div> <div class="layui-slider-vertical-line"></div>
<div <div
:style="{ :style="{
@ -31,7 +36,7 @@
:class="[props.disabled ? 'layui-slider-disabled' : '']" :class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else v-else
> >
<lay-tooltip :content="modelValue + ''"> <lay-tooltip :content="modelValue + ''" :is-can-hide="tooptipHide">
<div <div
:style="{ bottom: modelValue + '%' }" :style="{ bottom: modelValue + '%' }"
class="layui-slider-vertical-btn" class="layui-slider-vertical-btn"
@ -54,13 +59,13 @@
class="layui-slider-srange" class="layui-slider-srange"
v-if="range" v-if="range"
> >
<lay-tooltip :content="rangeValue[0] + ''"> <lay-tooltip :content="rangeValue[0] + ''" :is-can-hide="tooptipHide">
<div <div
:style="{ left: rangeValue[0] + '%' }" :style="{ left: rangeValue[0] + '%' }"
class="layui-slider-btn-v" class="layui-slider-btn-v"
></div> ></div>
</lay-tooltip> </lay-tooltip>
<lay-tooltip :content="rangeValue[1] + ''"> <lay-tooltip :content="rangeValue[1] + ''" :is-can-hide="tooptipHide">
<div <div
:style="{ left: rangeValue[1] + '%' }" :style="{ left: rangeValue[1] + '%' }"
class="layui-slider-btn-v" class="layui-slider-btn-v"
@ -84,7 +89,7 @@
:class="[props.disabled ? 'layui-slider-disabled' : '']" :class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else v-else
> >
<lay-tooltip :visible="true" :content="'' + modelValue"> <lay-tooltip :content="'' + modelValue" :is-can-hide="tooptipHide">
<div <div
:style="{ left: modelValue + '%' }" :style="{ left: modelValue + '%' }"
class="layui-slider-btn-v" class="layui-slider-btn-v"
@ -147,6 +152,7 @@ function throttle(func: Function) {
} }
const moveAction = throttle(handle_mousemove); const moveAction = throttle(handle_mousemove);
const tooptipHide = ref<Boolean>(true);
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
function handle_mousedown() { function handle_mousedown() {
on("selectstart", window, handle_select, { once: true }); on("selectstart", window, handle_select, { once: true });
@ -155,6 +161,7 @@ function handle_mousedown() {
} }
function handle_mousemove(e: MouseEvent) { function handle_mousemove(e: MouseEvent) {
tooptipHide.value = false;
if (props.disabled === true) { if (props.disabled === true) {
return false; return false;
} }
@ -181,6 +188,7 @@ function handle_mouseup() {
// off('selectstart', document, handle_select) // off('selectstart', document, handle_select)
off("mouseup", window, handle_mouseup); off("mouseup", window, handle_mouseup);
off("mousemove", window, moveAction); off("mousemove", window, moveAction);
tooptipHide.value = true;
currbtn = -1; currbtn = -1;
} }