vue.js 模拟input滑块验证效果

野性酷女 2022-10-15 00:39 304阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

<div class="range_type_class">
    	<div class="range_type_class_txt">向右拖动滑块填充拼图</div>
    	<input type="range" max="86" value="{
       {slider_value}}" v-model="slider_value" @input="slider_change" />
    		<div class="range_type_class_one" :style="{width:slider_value+'%'}">
    			<div class="range_type_class_one_txt" v-show="slider_value>=70">
    				已完成验证
    			</div>
    		</div>
    	<div class="range_type_class_two" :style="{left:slider_value+'%'}">→</div>
    </div>

data:{
        slider_value:0
    }
    
    
    
    methods: {
    		slider_change(){
    			console.log("触发",this.slider_value)
    		}
    }

.range_type_class {
    	width: 298px;
    	height: 42px;
    	background: #F5F5F5;
    	border: 1px solid #DDDDDD;
    	border-radius: 0px 3px 3px 0px;
    	margin-bottom: 20px;position: relative;overflow: hidden;
    }
    .range_type_class_txt{
    	width: 100%;
    	height: 42px;line-height: 42px;
    	padding-left: 52px;
    	position: absolute;left:0;top: 0;z-index: 66;
    }
    .range_type_class_two{
    	width: 42px;
    	height: 40px;line-height: 40px;text-align: center;cursor: pointer;
    	border-radius: 0;
    	background: #FFFFFF;
    	position: absolute;top: 0;z-index: 88;
    }
    .range_type_class_one{
    	height: 42px;
    	background: #D01B1B;
    	position: absolute;top: 0;z-index: 77;
    }
    .range_type_class_one_txt{
    	width: 100%;height: 100%;
    	line-height: 40px;
    	padding-left: 42px;color: #FFFFFF;
    }
    
    /* 隐藏input */
    .range_type_class>input {
    	opacity: 0;cursor: pointer;
    	width: 298px;
    	height: 40px;
    	position: absolute;left: 0;top: 0;z-index: 99;
    }
    
    input[type=range] {
    	-webkit-appearance: none;
    }
    
    input[type=range]:focus {
    	outline: none;
    }
    
    input[type=range]::-webkit-slider-thumb {
    	/* 设置这里是因为在隐藏之前需要看到 */
    	-webkit-appearance: none;
    	margin-top: -1px;
    	width: 42px;
    	height: 40px;
    	background: red;
    	border-radius: 0;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210522173509642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20221014/c35e0e1d6aec4871b87114ff89cdb3f8.png