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

fix: slider - 修复step参数 & 优化拖动逻辑

Browse Source
This commit is contained in:
halo 2022-03-09 22:54:47 +08:00
parent 22e88e458e
commit 03aac6076a
4 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/component/slider/StandardRange.vue
View File

@ -19,8 +19,11 @@ const props = withDefaults(defineProps<Prop>(), {
let rv = toRef(props, "rangeValue"); let rv = toRef(props, "rangeValue");
const moveAction = throttle(rangeMove); const moveAction = throttle(rangeMove);
let currbtn = -1;
function handle_mousedown() { function handle_mousedown() {
currbtn = -1;
tooptipHide.value = false;
on("selectstart", window, handle_select, { once: true }); on("selectstart", window, handle_select, { once: true });
on("mouseup", window, handle_mouseup); on("mouseup", window, handle_mouseup);
on("mousemove", window, moveAction); on("mousemove", window, moveAction);
@ -31,7 +34,6 @@ 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);
currbtn = -1;
} }
function handle_select(e: Event): void { function handle_select(e: Event): void {
e.preventDefault(); e.preventDefault();
@ -39,11 +41,11 @@ function handle_select(e: Event): void {
const tracker = ref<HTMLElement | null>(null); const tracker = ref<HTMLElement | null>(null);
const emit = defineEmits(["link-val-hook"]); const emit = defineEmits(["link-val-hook"]);
let currbtn = -1;
const tooptipHide = ref<Boolean>(true); const tooptipHide = ref<Boolean>(true);
function rangeMove(e: MouseEvent) { function rangeMove(e: MouseEvent) {
tooptipHide.value = false; // tooptipHide.value = false;
if (!tracker.value) { if (!tracker.value) {
return; return;
} }

9
src/component/slider/VerticalRange.vue
View File

@ -20,8 +20,10 @@ const props = withDefaults(defineProps<Prop>(), {
let rv = toRef(props, "rangeValue"); let rv = toRef(props, "rangeValue");
const moveAction = throttle(rangeMove); const moveAction = throttle(rangeMove);
let currbtn = -1;
function handle_mousedown() { function handle_mousedown() {
currbtn = -1;
tooptipHide.value = false;
on("selectstart", window, handle_select, { once: true }); on("selectstart", window, handle_select, { once: true });
on("mouseup", window, handle_mouseup); on("mouseup", window, handle_mouseup);
on("mousemove", window, moveAction); on("mousemove", window, moveAction);
@ -32,7 +34,6 @@ 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);
currbtn = -1;
} }
function handle_select(e: Event): void { function handle_select(e: Event): void {
e.preventDefault(); e.preventDefault();
@ -40,11 +41,11 @@ function handle_select(e: Event): void {
const tracker = ref<HTMLElement | null>(null); const tracker = ref<HTMLElement | null>(null);
const emit = defineEmits(["link-val-hook"]); const emit = defineEmits(["link-val-hook"]);
let currbtn = -1;
const tooptipHide = ref<Boolean>(true); const tooptipHide = ref<Boolean>(true);
function rangeMove(e: MouseEvent) { function rangeMove(e: MouseEvent) {
tooptipHide.value = false; // tooptipHide.value = false;
if (!tracker.value) { if (!tracker.value) {
return; return;
} }

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

@ -41,7 +41,7 @@ function valHook(val: any) {
<div v-if="range"> <div v-if="range">
<!-- 纵向区间 --> <!-- 纵向区间 -->
<VerticalRange <VerticalRange
:step="10" :step="step"
@linkValHook="valHook" @linkValHook="valHook"
:disabled="disabled" :disabled="disabled"
:rangeValue="rangeValues" :rangeValue="rangeValues"
@ -65,7 +65,7 @@ function valHook(val: any) {
<div v-if="range"> <div v-if="range">
<!-- 横向区间 --> <!-- 横向区间 -->
<StandardRange <StandardRange
:step="10" :step="step"
@linkValHook="valHook" @linkValHook="valHook"
:disabled="disabled" :disabled="disabled"
:rangeValue="rangeValues" :rangeValue="rangeValues"

2
src/component/slider/utils/index.ts
View File

@ -5,7 +5,7 @@ export function throttle(func: Function) {
timer = setTimeout(() => { timer = setTimeout(() => {
timer = null; timer = null;
func(args); func(args);
}, 20); }, 30);
} }
}; };
} }