Vue3 自定义悬浮按钮拖拽+底部tabbar自用

最新推荐文章于 2024-06-12 13:14:37 发布

茴熹

最新推荐文章于 2024-06-12 13:14:37 发布

阅读量1k

点赞数 1

分类专栏： vue前端文章标签：前端 vue Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42407059/article/details/129066163

版权

vue前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
  <div>
<--div这里悬浮-->
    <div class="menu"
         ref="dragDivImg"
         @click.stop="isShow=!isShow"
         @touchstart.stop="dragStart"
         @touchend.stop="dragEnd"
         @touchmove.stop="dragMove"><img src="../assets/home/menu.png"
           alt=""></div>
    <router-view />
    <van-tabbar v-model="activedd"
                route
                v-if="isShow">
      <van-tabbar-item v-for="(item,i) in iconList"
                       :key="i"
                       :replace="item.url!=='/mapPage'"
                       :to="item.url">
        <span>{{item.name}}</span>
        <template #icon="props">
          <img style="height:27px"
               :src="props.activedd? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { onMounted, ref, nextTick } from "vue";
export default {

  setup(props) {
    let activedd = ref(0)
//用到参数
    const dragDivImg = ref(null)
    let left = ref(0)//悬浮位置
    let top = ref(0)
    let screenW = ref(0)//屏幕尺寸
    let screenH = ref(0)
    let gapWidth = ref(0)
//结束
    let isShow = ref(true)
    let iconList = ref([
      {
        name: '基层服务',
        active: require('@/assets/home/jcfw.png'),
        inactive: require('@/assets/home/jcfw-a.png'),
        url: '/home'
      },
      {
        name: '警务资讯',
        active: require('@/assets/home/jczl.png'),
        inactive: require('@/assets/home/jczl-a.png'),
        url: '/jczl-home'
      },
      {
        name: '网点黄页',
        active: require('@/assets/home/wyhy.png'),
        inactive: require('@/assets/home/whhy-a.png'),
        url: '/mapPage'
      },
      {
        name: '工作台',
        active: require('@/assets/home/work.png'),
        inactive: require('@/assets/home/work-a.png'),
        url: '/work-home'
      },
    ])


    let clientXY = () => {
      if (window.innerHeight !== undefined) {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        }
      } else if (document.compatMode === "CSS1Compat") {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        }
      } else {
        return {
          width: document.body.clientWidth,
          height: document.body.clientHeight
        }
      }
    }
    //默认位置
    let checkEnv = () => {
      let clientInfo = clientXY();
      console.log(clientInfo, 'iiiii')
      screenW.value = clientInfo.width;
      screenH.value = clientInfo.height;
      top.value = screenH.value - 92 - 40; //默认位置，自行调整
      left.value = screenW.value - 85; //默认位置，自行调整
      //console.log(left.value, screenW.value, screenH.value, top.value, clientInfo, 'iiiii')
      dragDivImg.value.style.left = left.value + "px"//改变位置
      dragDivImg.value.style.top = top.value + "px"//改变位置
      // console.log(dragDivImg.value.style.left, dragDivImg.value.style)
    }
    //拖拽开始
    let dragStart = (e) => {
      console.log('tuodong')

      dragDivImg.value.style.transition = "none"; //不添加任何过度，防止鼠标移动的时候div原地不动
    }
    //拖拽结束
    let dragEnd = (e) => {
      dragDivImg.value.style.transition = "all 0.5s"; //最后div移动到屏幕边缘的过度属性
      if (left.value > screenW.value / 2) { //看div是偏左还是偏右，判断让div自动靠边站
        left.value = screenW.value - 92 - gapWidth.value;
        dragDivImg.value.style.left = left.value + "px"

      } else {
        left.value = gapWidth.value;
        dragDivImg.value.style.left = left.value + "px"

      }
    }
    let dragMove = (e) => {
      if (e.targetTouches.length === 1) {
        // console.log('tuodong', e.targetTouches)
        let touch = e.targetTouches[0];
        left.value = touch.clientX - 92 / 2;
        top.value = touch.clientY - 92 / 2;

        if (top.value <= 0) { //不能拖出去屏幕
          top.value = 0;
        } else if (top.value > screenH.value - 92) { //不能拖出去屏幕
          top.value = screenH.value - 92
        }
        dragDivImg.value.style.left = left.value + "px"
        dragDivImg.value.style.top = top.value + "px"
      }
    }

    onMounted(() => {
      checkEnv()


    })
    return {
      activedd,
      clientXY,
      checkEnv,
      iconList,
      isShow,
      dragDivImg,
      dragStart,
      dragEnd,
      dragMove

    }
  },


}
</script>
<style lang="scss" scoped>
.menu {
  position: fixed;
  left: calc(100% - 80px);
  top: 80%;
  z-index: 999;

  //cursor: move;
}
</style>