手机端悬浮按钮可拖动

最新推荐文章于 2024-11-14 10:16:35 发布

belamYJY

最新推荐文章于 2024-11-14 10:16:35 发布

阅读量71

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/belamYJY/article/details/132211221

版权

文章描述了如何在Vue项目中使用Movable-View组件创建一个可拖动的悬浮按钮，通过touchmove事件处理触摸移动，并通过点击触发父组件的回调方法。同时，CSS样式定义了按钮的样式和交互行为。

摘要由CSDN通过智能技术生成

<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;	//恢复鼠标事件
			// image {
			// 	width: $all_width;
			// 	height: $all_height;
			// }
		}
	}
	.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(){}

}