matlab滑块sliderstep,slider滑块组件
概述
1 .划定输入器，用于在数值区间。自定义区间内进行选择，支持连续或者离散值
2 .主要问题：兼容性是个大问题https://caniuse.com/#search=appearance
其实最简单的就是调用原生元素的事件，然后渲染自己想要的组件，但是万一不兼容就需要自己全部重写的。其实最麻烦的就是使用offsetleft那些属性来判断点击的位置在元素内部的距离，从而判断滑块的位置
3 .为什么源码里面没有找到input相关的部分呢？但是他有一个type=hidden的input元素。把这个删除发现也是没有问题可以跑的
4 .看了源码发现还是使用的js计算css样式，这样兼容性不错，但是代码复杂度大大增强，所以还是使用两种方式都操作一下算了。
5 .样式美化的思路
1 .直接更改原生的css样式
2 .将原生滑动条隐藏，opacity:0，自定义div实现想要的样式。这样其实还不是完全隐藏的，在ie上面点击会出现默认的显示当前数值的滑块。那个是不会隐藏的。
6 .如果要是添加开启双滑块的功能的话，就不能使用原生的组件了，这个必须使用js，好像使用这个组件叠加一下也是可以实现的。
7 .style绑定属性必须是写在computed里面的。
export default {
data:function(){
return {
range:this.max/2,
circleClass:[],
isShow:false,
}
},
props:{
disable:{
type:Boolean,
default:false,
},
step:{
type:Number,
default:5
},
min:{
type:Number,
default:0
},
max:{
type:Number,
default:100
},
showStep:{
type:Boolean,
default:false,
},
showTips:{
type:Boolean,
default:false,
}
},
methods:{
handleenter:function(){
this.circleClass.push('c1')
this.isShow=true;
},
handleBlur(){
this.circleClass.pop()
this.isShow=false;
}
},
computed:{
computedLeft:function(){
let range=this.range;
if(this.max){
range=(this.range/this.max)*100
}
return {
width:`${range}%`
}
},
computedCircle:function(){
let range=this.range;
if(this.max){
range=(this.range/this.max)*100
}
return {
left:`${range-5}%`
}
}
},
}
.slider{
width: 200px;
height: 30px;
.r;
.h;
top:100px;
}
.yuansheng_range{
.r;
.h;
width: 100%;
opacity: 0;
appearance: none;
outline: none;
z-index: 100;
}
.slider_wrap{
.r;
top:-16px;
width: 100%;
height: 5px;
background:@sborder;
border-radius: 2px;
}
.left{
.r;
top:-10px;
background: @blue;
height: 5px;
width: 0px;
border-radius:2px;
.t;
}
.circle{
.r;
top:-20px;
width: 10px;
height: 10px;
border-radius:50%;
border:2px solid @blue;
background: #fff;
.h;
}
.tips{
.r;
top:-40px;
left:-18px;
width: 50px;
height: 30px;
text-overflow: hidden;
background: @bgColor;
border-radius: 5px;
line-height: 30px;
color:#fff;
}
.jian{
width: 10px;
height: 10px;
background: @bgColor;
.r;
top:-45px;
transform: rotate(45deg)
}
.c1{
transform: scale(1.2,1.2)
}
.step_wrap{
.ds;
.r;
top:-5px;
}
.step{
flex:1;
height:10px;
border-radius: 2px;
border-right:3px solid @sborder;
}
1 .可以直接在这个上面做评分的组件