<template>
<view>
<!-- 悬浮按钮 -->
<movable-area class="movable-area">
<movable-view class="movable-view" :x="x" :y="y" direction="all" @touchmove.stop>
<view class="imgView" @tap="clickHandle">
<view style="margin-top:-4px;" >+</view>
</view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
x: 320, //x坐标
y: 520, //y坐标
}
},
methods: {
clickHandle(){
this.$emit('clickSet') //回调父组件方法
}
}
}
</script>
<style lang="scss">
$all_width: 96rpx;
$all_height:96rpx;
.movable-area {
height: 100vh;
width: 750rpx;
top: 0;
position: fixed;
pointer-events: none; //此处要加,鼠标事件可以渗透
.movable-view {
width: $all_width;
height: $all_height;
pointer-events: auto; //恢复鼠标事件
}
}
.imgView{
width:55px;
height:55px;
border-radius: 100%;
border:2px solid #b7b4b4;
display: flex;
justify-content: center;
align-items: center;
background-color:#007AFF;
color:#fff;
font-size: 45px;
}
</style>
页面引用
<float-button ref="fabMenu" @clickSet="trigger">
import floatButton from "@/components/floatingButton/indexMenu.vue";
export default {
components: {
floatButton
},
methods:{
trigger(){}
}
}