slider - add disabled

This commit is contained in:
wang 2021-12-19 20:09:22 +08:00
parent 63d1e7538d
commit 915c31b649
3 changed files with 13 additions and 1 deletions

View File

@ -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>

View File

@ -54,6 +54,9 @@
position: absolute; position: absolute;
top: 6px; top: 6px;
} }
.layui-slider-disabled {
cursor: not-allowed;
}
// 纵向样式 // 纵向样式
.layui-slider-vertical { .layui-slider-vertical {

View File

@ -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 {