vue3实现客服图标拖拽功能

ZN_WEB

已于 2023-11-02 11:32:50 修改

阅读量361

点赞数 1

文章标签：前端 javascript vue.js

于 2023-09-12 09:18:53 首次发布

本文链接：https://blog.csdn.net/ZN_WEB/article/details/132823626

版权

 <div v-if="route.name!=='login'" ref="el" :style="style" style="position: fixed; user-select: none;">
      <div class="customer-service" @click="open" ></div>
    </div>

import { useDraggable, useWindowSize } from '@vueuse/core'
const el = ref(null)
const { width, height } = useWindowSize()
const startTime = ref(0)
const endTime = ref(0)
const { x, y, style } = useDraggable(el, {
  initialValue: { x: width.value - 100, y: height.value -100 },
  onStart: ()=>{
    startTime.value = new Date().getTime()
  },
  onMove: (position) => {
    if (position.x > width.value - 100) {
      position.x = width.value - 100
    }
    if (position.x < 0) {
      position.x = 0
    }
    if (position.y > height.value - 100) {
      position.y = height.value - 100
    }
    if (position.y < 0) {
      position.y = 0
    }
  },
  onEnd: (position)=>{
    endTime.value = new Date().getTime()
  },
})
const open = ()=>{
  if(endTime.value-startTime.value<200){
    openCustomer()
  }
}

.customer-service{
  width: 56px;
  height: 62px;
  background-image: url("@/assets/img/customer-service.png");
  background-size: 100% 100%;
  cursor: move;
}