适用于手机端、pc端的vue3可拖拽悬浮球功能

已于 2024-06-25 09:20:52 修改
阅读量297 收藏
点赞数 1
文章标签： 前端 javascript vue.js
于 2024-06-01 16:44:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsw_1999/article/details/139375923
版权

借助插件 float-dom 实现，这个插件可以将页面上任意的 dom 变成悬浮可拖拽的节点，只需要定义范围节点和悬浮节点就可以使用了，（手机端目前仅支持h5）

代码示例非常简单，加起来没几行，完整代码可以参考

demo

下面是使用效果

313f316ce80d4c1dbd229dd3039ecda0.gif

 

xsw_1999
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现PC端靠边悬浮球的代码
10-15
主要介绍了Vue实现靠边悬浮球(PC端)效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现吸壁悬浮球
yang_da_da的博客
10-18 1678
最近接到一个需求，需要一个客服悬浮按钮，可以拖拽并吸壁到页面周边，我们一起看看吧 1.创建一个template，定义客服按钮，自定义v-drag指令 <template> <div class="container"> <div class="btn" id="btn" :style="{ visibility: dialogVisible ? 'hidden' : 'visible' }" v-drag="{ set
Vue3+TS封装一个可任意拖拽的悬浮球组件，可拓展
annans的博客
10-20 3968
Vue3+TS封装一个可任意拖动的悬浮球组件，可拓展
vue当中实现悬浮球可拖拽
m0_53912016的博客
04-26 1843
touch.vue <template> <transition> <div ref="breathing_lamp" class="breathing_lamp" @click="onclick()" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.s
纯js实现可拖拽和点击的悬浮球
04-01
纯js实现可拖拽和点击的悬浮球
vue3+ts实现右边悬浮按钮可上下拖动
weixin_45941959的博客
09-18 1163
vue3+ts实现右边悬浮按钮并且可上下移动
vue3自定义实现悬浮固定按钮组件
吉屋安的博客
02-26 2338
目录 一、需求描述二、代码解读三、结果展示 一、需求描述 需要5个固定的悬浮圆，居于页面的右侧。 鼠标悬浮在圆上面会显示对应的文字提示 其中包含返回顶部悬浮圆，当页面滑至底部时出现，点击页面滑到顶部。 点击按钮会给出弹窗 二、代码解读 <template> <div class="circle-container"> <Tooltip title="返回顶部" placement="left"> <div v-show="showTop"
vue3+ts+elementPlus 实现视图右边悬浮按钮+可上下拖拽
h1606641309的博客
01-20 1572
代码如下：/**侧边栏按钮上下拖拽功能部分 */// 移动的距离});&:hover {.el-icon {最后在App.vue 立面引用或者直接在定义的layout全局布局文件里面 使用即可layout用于框架的全局布局。
Vue 中实现按钮悬浮效果的多种方法详解
pleaseprintf的博客
06-24 7236
按钮是 Web 应用中常见的交互元素，为了增加按钮的可视效果和用户体验，我们可以在按钮上添加悬浮效果。在 Vue 中，通过 Element UI 的 el-button 组件，我们可以实现多种按钮悬浮效果。本文将详细介绍 Vue 中实现 el-button 悬浮效果的多种方法，帮助您选择适合的方式为按钮增添动感效果。Element UI 的主题样式提供了自定义按钮的能力，我们可以根据需要在主题文件中定义按钮的悬浮效果。/* 悬浮效果样式 */ . el - button -- hover {
Vue实现仿iPhone悬浮球的示例代码
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个仿iPhone悬浮球的功能。这个功能可以让用户在界面上自由移动一个小球形按钮，类似于iOS设备上的Assistive Touch功能。以下是一个详细的步骤和示例代码解析。 ...
vue悬浮可拖拽悬浮按钮的实例代码
10-16
主要介绍了vue悬浮可拖拽悬浮按钮的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3 自定义悬浮按钮拖拽+底部tabbar自用
weixin_42407059的博客
02-16 1008
自用：自定义拖拽
VUE3+Ts通过自定义指令实现按钮悬浮拖拽
web_Bennu的博客
06-15 833
在utils文件夹下创建文件// 拖拽的指令// 自定义属性，判断是否可拖拽if (!// 获取自定义指令所在的dom元素bottom:0px;// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);// 在ie下兼容写法})()//判断元素移动还是被点击// 鼠标按下，计算当前元素距离可视区的距离。
vue3+ant design vue实现一个1，可拖拽的悬浮框，2，框内有字幕滚动，鼠标悬停，字幕停止滚动，3，点击后可出现详情下拉框
zsm__zsm的博客
08-28 763
1，可拖拽的悬浮框，2，框内有字幕滚动，鼠标悬停，字幕停止滚动，3，点击后可出现详情下拉框
naive-ui+vue3+可拖拽悬浮框
t1220130004的博客
01-24 704
该段代码实现悬浮框拖拽，表单提交，表单验证，表单隐藏与展开。悬浮框拖拽阻止悬浮框出浏览器外。
Vue3悬浮返回主页按钮设计与实现
delete_you的博客
01-24 3221
简要实现一个悬浮按钮，主要用到绝对定位以及elementplus中的固钉组件
Vue3 手写函数式悬浮窗
最新发布
qq_40505914的博客
04-17 313
第二步 渲染组件，写一个ts文件：showTips.ts。首先需要写一个弹窗组件 Snackbars.vue。第三步在其他组件引用的时候导入。
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素，且配置为自定义的全局指令
都随它大小便吧
04-16 5414
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素，且配置为自定义的全局指令。
vue 适应pc 手机端
08-22
Vue 是一个非常灵活的前端开发框架，可以轻松适应 PC 端和手机端的需求。下面是一些适配 PC 和手机端的建议： 1. 响应式布局：使用 CSS 媒体查询和 Flexbox/Grid 等技术，使页面在不同屏幕尺寸下能够自适应布局。可以使用 Vue 的计算属性和绑定样式来实现动态样式调整。 2. 移动优先：在设计上优先考虑手机端，然后再根据需要逐渐扩展适配 PC 端。这样能够确保页面在手机上具有良好的用户体验，并且可以通过媒体查询等方式进行适配。 3. 组件复用：将一些通用的组件抽离出来，通过条件渲染或者插槽等方式，在 PC 和手机端进行复用。这样可以减少代码冗余，提高开发效率。 4. 移动端交互优化：在手机端，考虑到手指触摸操作与鼠标点击的差异，可以使用 Vue 的移动端触摸事件（如 v-touch）来实现更友好的交互体验。 5. 路由配置：根据设备类型，动态配置路由，以便于在不同设备上呈现不同的页面或者组件。可以使用 Vue Router 的导航守卫来实现相关逻辑。 总的来说，Vue 提供了很多方便的工具和特性来帮助开发者适配 PC 和手机端。结合上述建议，可以很好地实现跨平台的响应式应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值