<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>
Vue3 自定义悬浮按钮拖拽+底部tabbar自用
最新推荐文章于 2024-06-12 13:14:37 发布