首页 > 其他分享 >vue可拖拽悬浮按钮组件

vue可拖拽悬浮按钮组件

时间:2023-08-07 14:34:49浏览次数:43  
标签:vue const endX 拖拽 width window 按钮 document event

效果

vue可拖拽悬浮按钮组件_上传

预览

预览地址:http://120.79.163.94/JYeontuComponents/#/JHoverBtnView

关键代码实现

阻止默认拖动选择事件
preventEvent(){
	document.getElementById('j-hover-btn').ondragstart = function() {
		return false;
	};
	document.getElementById('j-hover-btn').onselectstart = function () {
		return false;
	};
},
鼠标点击按钮事件
itemClick(event){
	//记录点击的初始位置
	this.startX = event.pageX - window.scrollX;
	this.startY = event.pageY - window.scrollY;
	//修改点击状态
	this.clickStatus = true;
	//阻止默认选中事件
	this.windowPreventEvent();
}
鼠标移动事件
handleMouseover(event){
	//按钮处于点击状态
	if(this.clickStatus){
		//按钮为fixed布局,位置需要减去窗口滚动偏移量
		const endX = event.pageX - window.scrollX,
			endY = event.pageY - window.scrollY;
		const dom = document.getElementById('j-hover-btn');
		//区分点击事件和拖动事件
		if(Math.abs(endX - this.startX) > this.clickDis || Math.abs(endY - this.startY) > this.clickDis){
			this.isClick = false;
		}
		//移动按钮位置
		dom.style.left = endX - this.width / 2 + 'px';
		dom.style.top = endY - this.width / 2 + 'px';
	}
}
鼠标抬起事件
handleMouseup(event){
	if(this.clickStatus){
		const endX = event.pageX - window.scrollX,
			endY = event.pageY - window.scrollY;
		if(this.isClick){
			//父组件回调事件
			this.$emit('hoverBtnClick');
		}else{
			if(!this.autoHide) return;
			//按钮贴边自动缩进隐藏
			const width = document.body.offsetWidth;
			const height = document.body.offsetHeight;
			const dom = document.getElementById('j-hover-btn');
			if(endX < this.width / 2){
				dom.style.left = -(this.width - this.showWidth) + 'px';
			}else if(endX > width - this.width / 2){
				dom.style.left = width - this.showWidth + 'px';
			}
		}
		//恢复状态
		this.clickStatus = false;
		this.isClick = true;
		this.windowPreventEventCancel();
	}
}

npm引入

组件以上传到npm,可以直接install使用,0.1.4以上版本加入了该组件。

1.安装
npm i @jyeontu/jvuewheel -S
2.引入
//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);
3.vue中引用组件
<j-hover-btn bgColor = 'pink' 
			width = '80' 
			text = '按钮文字' 
			:btn-style = "btnStyle" 
			@hoverBtnClick = "hoverBtnClick()">
</j-hover-btn>

资源地址

组件使用文档

文档地址:http://120.79.163.94/JYeontuComponents/#/homePage

代码地址

Gitee地址:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse

说在后面

标签:vue,const,endX,拖拽,width,window,按钮,document,event
From: https://blog.51cto.com/u_16148374/6993516

相关文章

  • ABAP ALV 单元格按钮
    本文转自:https://blog.csdn.net/JZYDDFZJ/article/details/132101267一、介绍具体方法如下:1.提前给想要变成按钮的单元格赋值图标代码;2.在ALV数据输出表定义field_style参考表类型LVC_T_STYL(单元格的类型表)主要是放入控制单元格的状态的一些参数;3.把想编辑处理的字段名称放......
  • vue报错 Multiple assets emit different content to the same filename index.html
    vue-cli版本:@vue/[email protected]报错现象:想把css和script全部内嵌到html文件中,就用了"HtmlInlineScriptPlugin"插件,打包后js代码被嵌到了head里,导致代码提前执行找不到#app,再配置HtmlWebpackPlugin插件通过inject:"body"指定代码内嵌到body,打包报错"Multipleassetsemitdiff......
  • Vue的升级与降级命令
    vue2.0–>3.0npmuninstallvue-cli-g(全局卸载vue2.0)npminstall@vue/cli-g(全局安装vue3.0)npminstall@vue/cli-init-g(如果还想使用vue2.0可以安装这个桥接工具)vueinitwebpack(2.0创建项目)vuecreatedemo(项目名称)(3.0创建项目)vue3.0->2.0npmuninstal......
  • vue中axios多次相同请求取消上一个请求
    apiimportaxiosfrom'axios';exportfunctiongetDataFlowGraph(id,that){returnrequest({requestBase,url:`/workflowMetadata/getDataFlowGraph/${id}`,method:'get',//设置canceltoken用于多次请求,中断上一次请求cancel......
  • Vue中 全局限制输入特殊字符
    传送门:Vue实现自定义指令(directive)及应用场景背景:开发中遇到的表单输入,常常会限制特殊字符的输入以满足安全性测试的要求。1.单独处理每个文本框<template><el-inputv-model="content"placeholder="请输入"@change="vaidateEmoji"></el-input></template......
  • 拖拽宫格vue-grid-layout详细应用及案例
    目录1、前言2、安装3、属性4、事件5、占位符样式修改6、案例1、前言vue-grid-layout是一个适用于vue的拖拽栅格布局库,功能齐全,适用于拖拽+高度/宽度自由调节的布局需求。本文将讲述一些常用参数和事件,以及做一个同步拖拽的Demo。效果动态图如下:2、安装vue2版本:npminstall......
  • 前端 Vue 应该知道的一些东西,个人笔记 2021-11-26
    前端代码编写规范及es6常用语法命名规范文件夹名称,文件名称,组件名称,统一使用大驼峰或者小横线方式命名;组件文件名:list-item.vue.或者ListItem.vue;基础的无状态的通用组件加VBaseApp前缀BaseButtonAppButton在html中<base-button>或者<BaseButton>url路径名:小......
  • 如何在 SwiftUI 中创建悬浮操作按钮
    前言悬浮操作按钮(FloatingActionButton,FAB)是一种在Android和MaterialDesign中使用的UI元素。它用于触发特定屏幕的主要操作。尽管它来自Android,但在一些iOS应用中也可以看到这种模式。以下是Twitter应用中悬浮操作按钮的示例。TwitterApp在最重要的操作步骤,发布......
  • 【Vue笔记链接总结】
    【Vue笔记链接总结】【一】前端发展史【1.0】前端的发展史-Chimengmeng-博客园(cnblogs.com)【二】Vue之介绍及引入【2.0】Vue之引入-Chimengmeng-博客园(cnblogs.com)【三】Vue之基础语法【3.0】Vue之语法-Chimengmeng-博客园(cnblogs.com)【四】Vue......
  • vue-router addRoute将子路由添加到指定路由下
    router.addRoute()可以向vue路由中动态的添加路由信息,但,路由存在多层级关系,例如,最开始的路由是这样的:{path:'/',name:'layout',component:resolve=>require(['../layout'],resolve),meta:{title:'',handleStatus:......