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