10-21 悬浮可移动组件

最新推荐文章于 2024-02-23 15:09:23 发布

凡c.

最新推荐文章于 2024-02-23 15:09:23 发布

阅读量162

点赞数

分类专栏：组件文章标签： Vue.js 悬浮窗口拖放事件监听组件

本文链接：https://blog.csdn.net/mzh_96/article/details/120880326

版权

组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单悬浮组件类似360小浮窗
![在这里插入图片描述](https://img-blog.csdnimg.cn/534ef9d463004abeb193159b21e12a6d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YehYy4=,size_20,color_FFFFFF,t_70,g_se,x_16

在这里插入图片描述

<template>
        <!-- 浮窗 -->
            <div class="floating"  @click="onClick" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"  ref="fu">
                <div class="floating-s">
                    <div class="stay_box">
                        <div class="stay_text">待操作</div>
                        <div class="stay_number">{{List.waitOperatorCount}}</div>
                        <!-- <img  class="stay_img" src="../../assets/images/float1.png" alt=""> -->
                    </div>
                    <div class="shipment_audit">
                        <div class="shipment">发货:{{List.sendRetreatCount}}</div>
                        <div class="audit">审核:{{List.waitCheckCount}}</div>
                        <!-- <img class="shipment_img" src="../../assets/images/float2.png" alt=""> -->
                    </div>
                    
                </div>
            </div>
</template>

<script>

export default {
    props:["OperatorList"],//接受信息
    data(){
        return {
            List:this.OperatorList,//待操作列表
			flags: false,//控制使用
			position: {
				x: 0,
				y: 0
			},
			nx: '',
			ny: '',
			dx: '',
			dy: '',
			xPum: '',
			yPum: ''
        }
    },
    mounted(){
        
    },
    watch:{//监听
        OperatorList(){
            this.List = this.OperatorList;
            console.log(this.List)
        },
    },
    methods:{
        down() {//鼠标点击
                    this.flags = true;
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    this.position.x = touch.clientX;
                    this.position.y = touch.clientY;
                    this.dx = this.$refs.fu.offsetLeft;
                    this.dy = this.$refs.fu.offsetTop;
		},
		move() {//鼠标移动拖动浮窗位置
			if (this.flags) {
				var touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				this.nx = touch.clientX - this.position.x;
				this.ny = touch.clientY - this.position.y;
				this.xPum = this.dx + this.nx;
				this.yPum = this.dy + this.ny;
				let width=window.innerWidth - this.$refs.fu.offsetWidth//屏幕宽度减去自身控件宽度
				let height=window.innerHeight - this.$refs.fu.offsetHeight//屏幕高度减去自身控件高度
				this.xPum < 0 && (this.xPum = 0)
				this.yPum < 0 && (this.yPum = 0)
				this.xPum > width && (this.xPum = width)
				this.yPum > height && (this.yPum = height)
				// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
					this.$refs.fu.style.left = this.xPum + 'px';
					this.$refs.fu.style.top = this.yPum + 'px';
				// }
				//阻止页面的滑动默认事件
				document.addEventListener(
					'touchmove',
					function() {
						event.preventDefault();
					},
					false
				);
			}
		},
		//鼠标释放时候的函数
		end() {
			this.flags = false;
		},
		onClick(){
			//在这里我是作为子组件来使用的
			this.$emit('click')
		},
    }
}
</script>

<style scoped>
.floating{
    width: 119px;
    display: flex;
    justify-items: flex-start;
    align-content: center;
    position: fixed;
    top: 16%;
    right: 2%;
    cursor: pointer;
}
.floating-s{
    width: 119px;
    height: 70px;
    position: relative;
    display: flex;
    justify-items: flex-start;
    align-content: center;
}
.stay_box{
    width: 70px;
    height: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../../assets/images/float1.png');
    background-repeat:no-repeat;
    z-index: 998;
}
.stay_text{
    height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stay_number{
    height: 15px;
    font-size: 20px;
    font-family: DIN;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 2px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stay_img{
    width: 70px;
    position: absolute;
    z-index: 997;
}
.shipment_audit{
    width: 108px;
    height: 55px;
    position: absolute;
    z-index: 996;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background-image: url('../../assets/images/float2.png');
    background-repeat:no-repeat;
    margin-top: 5px;
    margin-left: 23px;
}
.shipment{
    height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 2px;
    display: flex;
    align-items:center;
    justify-content: center;
    margin-right: 19px;
    margin-bottom: 8px;
}
.audit{
    height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 8px; */
    margin-right: 19px;
}
.shipment_img{
    width: 100%;
    z-index: 995;
}
</style>