当前位置:首页 > vue.js > 正文内容

vue 用当前对象获取坐标距离

自由小鸟3年前 (2022-04-20)vue.js1884

selectMeeting(day, jsEvent) {
//jsEvent 这个传进来就是$event
this.selectDay = day;
this.showMore=false;
this.meetingShowMore = true;
this.morePos = this.computePos(jsEvent.target);
//byludan 如果窗口到最右边往左移动
let totalMub=this.$refs.dates.getBoundingClientRect().width
let totalLeft=this.morePos.left
let totalWidth=226
if(totalLeft+totalWidth>totalMub){
this.morePos.left -= 189;
// console.log(‘morePos====’,totalMub-(totalLeft+totalWidth))
// console.log(‘ludanaaa11====’,jsEvent.target.getBoundingClientRect())
// console.log(‘ludanaaa====22’, this.$refs.dates.getBoundingClientRect())
// this.$emit(“meetingclick”, day.date, events, jsEvent);
}

  // this.morePos.left -= 80;
  // console.log('这里是当天的数据day===',day)
  // console.log('这里是当天的数据jsEvent===',jsEvent)
  let events = day.events.filter(item => {
    return item.eventType == 'meeting';
  });



}, //byludan end
//下面这个函数就是重点可以获取的左右坐标
computePos(target) { 
  let eventRect = target.getBoundingClientRect();
  let pageRect = this.$refs.dates.getBoundingClientRect();
  console.log()
  return {
    left: eventRect.left - pageRect.left,
    top: eventRect.top + eventRect.height - pageRect.top
  };
},

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://www.webge.net/?id=133

“vue 用当前对象获取坐标距离” 的相关文章

vue做博客中的问题记录

vue做博客中的问题记录

1,全局变量,统一管理变量文件,路径如:../src/static/css/globle.scss<1>添加依赖 npm install sass-resources-loader --save-dev<2>在项目build文件夹里找到...

vue-router 路由几种模式,分别什么用法

vue-router 默认 hash 模式 .  http://music.163.com/#/friend还有一种是history模式。  http://music.163.com/friendhash模式背后的原理是onhashchange事件,...

vuex刷新状态消失的解决办法

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况那在这种情况下可以使用方案:在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...

vue 时间戳转今天,昨天,以前时间

filters:{ formatDate(date) { const lastDate = new Date(date); lastDate.setHours(0); lastDate.setMinutes(0); lastDate.setSecon...

vue updateModel

vue updateModel

v-model高级用法...