slider - add disabled
This commit is contained in:
parent
f0cc890411
commit
34b65ad8ae
@ -22,7 +22,7 @@ export default {
|
|||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-slider v-model="value2" :vertical="vertical"></lay-slider>
|
<lay-slider v-model="value2" :vertical="vertical" :disabled="true"></lay-slider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -55,7 +55,10 @@
|
|||||||
top: 6px;
|
top: 6px;
|
||||||
}
|
}
|
||||||
.layui-slider-disabled {
|
.layui-slider-disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
.layui-slider-disabled-rate {
|
||||||
|
background-color: rgb(0, 150, 136) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 纵向样式
|
// 纵向样式
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
<div
|
<div
|
||||||
:style="{ height: modelValue + '%' }"
|
:style="{ height: modelValue + '%' }"
|
||||||
class="layui-slider-vertical-rate"
|
class="layui-slider-vertical-rate"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
|
||||||
></div>
|
></div>
|
||||||
<div class="layui-slider-vertical-line"></div>
|
<div class="layui-slider-vertical-line"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -38,6 +39,7 @@
|
|||||||
<div
|
<div
|
||||||
:style="{ width: modelValue + '%' }"
|
:style="{ width: modelValue + '%' }"
|
||||||
class="layui-slider-rate-v"
|
class="layui-slider-rate-v"
|
||||||
|
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
|
||||||
></div>
|
></div>
|
||||||
<div class="layui-slider-line-v"></div>
|
<div class="layui-slider-line-v"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -140,7 +142,6 @@ const verticalMove = (e: MouseEvent) => {
|
|||||||
vertical_style.height = 0;
|
vertical_style.height = 0;
|
||||||
} else {
|
} else {
|
||||||
let rate = (distance / tracker_rect.height) * 100;
|
let rate = (distance / tracker_rect.height) * 100;
|
||||||
console.log(rate);
|
|
||||||
vertical_style.bottom = Math.floor(rate);
|
vertical_style.bottom = Math.floor(rate);
|
||||||
vertical_style.height = Math.floor(rate);
|
vertical_style.height = Math.floor(rate);
|
||||||
if (vertical_style.bottom > 100) {
|
if (vertical_style.bottom > 100) {
|
||||||
|
Loading…
Reference in New Issue
Block a user