slider - add disabled
This commit is contained in:
parent
63d1e7538d
commit
915c31b649
@ -1,7 +1,7 @@
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-slider v-model="value1"></lay-slider>
|
<lay-slider v-model="value1" :disabled="true"></lay-slider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -54,6 +54,9 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
}
|
}
|
||||||
|
.layui-slider-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
// 纵向样式
|
// 纵向样式
|
||||||
.layui-slider-vertical {
|
.layui-slider-vertical {
|
||||||
|
@ -4,11 +4,13 @@
|
|||||||
ref="verticaltracker"
|
ref="verticaltracker"
|
||||||
@mousedown.stop="handle_mousedown"
|
@mousedown.stop="handle_mousedown"
|
||||||
class="layui-slider-vertical-track"
|
class="layui-slider-vertical-track"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled' : '']"
|
||||||
>
|
>
|
||||||
<lay-tooltip :content="modelValue + ''">
|
<lay-tooltip :content="modelValue + ''">
|
||||||
<div
|
<div
|
||||||
:style="{ bottom: modelValue + '%' }"
|
:style="{ bottom: modelValue + '%' }"
|
||||||
class="layui-slider-vertical-btn"
|
class="layui-slider-vertical-btn"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled' : '']"
|
||||||
></div>
|
></div>
|
||||||
</lay-tooltip>
|
</lay-tooltip>
|
||||||
<div
|
<div
|
||||||
@ -24,11 +26,13 @@
|
|||||||
ref="standardtracker"
|
ref="standardtracker"
|
||||||
@mousedown.stop="handle_mousedown"
|
@mousedown.stop="handle_mousedown"
|
||||||
class="layui-slider-track-v"
|
class="layui-slider-track-v"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled' : '']"
|
||||||
>
|
>
|
||||||
<lay-tooltip :content="modelValue + ''">
|
<lay-tooltip :content="modelValue + ''">
|
||||||
<div
|
<div
|
||||||
:style="{ left: modelValue + '%' }"
|
:style="{ left: modelValue + '%' }"
|
||||||
class="layui-slider-btn-v"
|
class="layui-slider-btn-v"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled' : '']"
|
||||||
></div>
|
></div>
|
||||||
</lay-tooltip>
|
</lay-tooltip>
|
||||||
<div
|
<div
|
||||||
@ -52,11 +56,13 @@ interface LaySliderProps {
|
|||||||
min?: number;
|
min?: number;
|
||||||
max?: number;
|
max?: number;
|
||||||
step?: number;
|
step?: number;
|
||||||
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LaySliderProps>(), {
|
const props = withDefaults(defineProps<LaySliderProps>(), {
|
||||||
vertical: false,
|
vertical: false,
|
||||||
modelValue: 0,
|
modelValue: 0,
|
||||||
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const standardtracker = ref<HTMLElement | null>(null);
|
const standardtracker = ref<HTMLElement | null>(null);
|
||||||
@ -78,6 +84,9 @@ function handle_mousedown() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handle_mousemove(e: MouseEvent) {
|
function handle_mousemove(e: MouseEvent) {
|
||||||
|
if (props.disabled === true) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
if (props.vertical === false) {
|
if (props.vertical === false) {
|
||||||
standardMove(e);
|
standardMove(e);
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user