手机端悬浮按钮包含个菜单可拖动

最新推荐文章于 2024-06-03 17:48:59 发布

belamYJY

最新推荐文章于 2024-06-03 17:48:59 发布

阅读量226

点赞数 1

文章标签： css 前端 javascript

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

版权

新建组件 fab.vue 基于uni-ui框架

<template>
	<view>
		<!-- 悬浮按钮 多个菜单 -->
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @touchmove.stop>
				<uni-fab class="fab" ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal"
					:vertical="vertical"  :direction="direction" @trigger="trigger" @fabClick="fabClick"/>
			</movable-view>
		</movable-area>
	</view>
</template>
 
<script>
	export default {
		props:['horizontal','vertical','direction','pattern','content'],
		data() {
			return {
				x: 320,		//x坐标
				y: 480,		//y坐标
			}
		},
		mounted() {
			//根据屏幕高度设置y坐标
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					// 计算组件的高度
					that.y = res.windowHeight -10
				}
			})
		},
		methods: {
            fabClick(){
                //点击事件
                this.$emit('fabClick') //回调父组件方法
            },
			trigger(e){
                //点击菜单
				this.$emit('clickSet',e) //回调父组件方法
			},
			closePress() {
				if (this.$refs.fab.isShow) {
					this.$refs.fab.close()
					return true
				}
				return false
			}
		}
	}
</script>
 
<style lang="scss">
	$all_width: 96rpx;
	$all_height:96rpx;
 
	.movable-area {
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		z-index: 10;
		pointer-events: none;		//此处要加，鼠标事件可以渗透
		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto;	//恢复鼠标事件
			// image {
			// 	width: $all_width;
			// 	height: $all_height;
			// }
		}
	}
	::v-deep .uni-fab__content--other-platform {
	    box-shadow: 0 1px 5px 2px rgba(241, 233, 233, 0.1);
	}
	.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>

在页面引用

<template>
    <view>
<!-- 悬浮按钮 -->
		<fab @clickSet="clickSet" @fabClick="fabClick" :horizontal='horizontal' :vertical='vertical' :pattern='pattern' :content='content'></fab>
	</view>
</template>



//基于uni-ui
import fab from "@/components/fab/fab.vue";

export default {
    data() {
			return {
				horizontal:'right',
				vertical:'bottom',
				content: [{
					iconPath: '/static/contractChange.png',
					selectedIconPath: '/static/contractChange-active.png',
					text: '标准合同',
					active: false
				}, {
					iconPath: '/static/contractChange.png',
					selectedIconPath: '/static/contractChange-active.png',
					text: '非标合同',
					active: false
				}],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#12c1dd',
					buttonColor: '#12c1dd',
					iconColor: '#fff',
					text: '合同对比',
				},
			},
        components: {
            fab
        },
        methods:{
            fabClick(){

            },
            clickSet(e){
                console.log(e.index)
            }
          }

}