vue项目实现可以滑动的时间标尺-觅稀奇MeXiQi.COM

效果:可以左右滑动的

html部分:

<divclass="body">

<div>当前选中月份:{{chiziValue}}</div>

<divid="parent"class="kdZ">

<divclass="hkBox"ref="pondModel">

<divid="children"@mousedown="move"ref="sonNode"></div>

</div>

<divclass="center">

<div>{{leftselectValue}}</div>

<div>{{leftselectValue1}}</div>

</div>

<divclass="bottom">

<div:class="[chiziIndex==item?'active':'']"v-for="(item)in12":key="item">{{item}}月</div>

<div:class="[chiziIndex==-1?'active':'']">1月</div>

</div>

css部分:

.body{

overflow:hidden;

width:100%;

height:900px;

background:#00132D;

border:1pxsolidrgba(50,197,255,1);

.kdZ{

width:980px;

height:130px;

margin:0auto;

margin-top:26.5px;

background:url('../assets/chiz.png')no-repeat;

background-size:100%100%;

.hkBox{

position:relative;

height:27px;

width:936px;

//border:1pxsolidred;

//margin:0auto;

margin-top:-2px;

margin-left:24px;

#children{

position:absolute;

width:36px;

height:20px;

background:url('../assets/yidong.png')no-repeat;

background-size:100%100%;

cursor:move;

}

.center{

display:flex;

width:100%;

position:relative;

div{

font-family:PingFangSC-Medium;

font-size:22px;

color:#ffff;

text-align:center;

font-weight:500;

}

div:nth-child(1){

position:absolute;

left:19px;;

top:-10.5px;

}

div:nth-child(2){

position:absolute;

right:61px;;

top:-10.5px;

}

.bottom{

display:flex;

margin-top:55px;

margin-left:30px;

div{

font-family:PingFangSC-Regular;

font-size:18px;

color:#32C5FF;

letter-spacing:0;

text-align:center;

font-weight:400;

margin-right:42px;

white-space:nowrap;

}

.active{

font-family:PingFangSC-Medium;

font-size:20px;

color:#32C5FF;

font-weight:600;

}

div:nth-child(11),div:nth-child(12),div:nth-child(13){

margin-left:-10px;

}

js部分:

data(){

return{

leftselectValue:2021,//左侧下拉菜单选中的

rightselectValue:2021,//右侧表格下拉菜单选中的

chiziIndex:1,//尺子日期的索引

chiziValue:'2021年1月',///尺子日期,默认

}

methods:{

move(event){

letthat=this

console.log(event)

letodiv=event.target

letdisX=event.clientX-odiv.offsetLeft

letdisY=event.clientY-odiv.offsetTop

document.onmousemove=(e)=>{

//计算元素位置(需要判断临界值)

letleft=e.clientX-disX;

//lettop=e.clientY-disY;

let{

//this.$refs.pondMode.offsetHeight

offsetHeight:pondModelHeight,

offsetWidth:pondModelWidth,

}=this.$refs.pondModel;

let{

offsetHeight:sonNodeHeight,

offsetWidth:sonNodeWidth,

}=odiv;

//左上角(left)

if(left<0){

left=0;

}

if(left>=that.getFontSize(851)){

left=that.getFontSize(851);

}

if(top<0){

top=0;

}

//左下角

if(top>pondModelHeight-sonNodeHeight){

//top=pondModelHeight-sonNodeHeight-sonNodeHeight/2;

top=pondModelHeight-sonNodeHeight;

//正常的是pondModelHeight-sonNodeHeight但是我的dom会超出半个所以我这加了半个距离没找到原因

}

if(left>pondModelWidth-sonNodeWidth){

console.log(123);

//left=pondModelWidth-sonNodeWidth-sonNodeWidth/2;

left=pondModelWidth-sonNodeWidth

//正常的是pondModelWidth-sonNodeWidth但是我的dom会超出半个所以我这加了半个距离没找到原因

}

odiv.style.left=left'px'

odiv.style.top=top'px'

console.log(left);

odiv.style.zIndex=999

//判断当前指示到了几月份

if(left<=0){

this.chiziIndex=1