vue实现可移动的悬浮按钮
2021-03-05 04:06
267 查看
本文实例为大家分享了vue实现可随处移动悬浮按钮的具体代码,供大家参考,具体内容如下
1.html代码
<div class="callback float" @click="onClick" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="fu" > <!-- <p @click="callback">返回</p> --> <img @click="callback" src="@/assets/images/callbs.jpg" alt /> </div>
2.再data中定义
data() { return { isLoading: false, flags: false, //控制使用 position: { x: 0, y: 0, }, nx: "", ny: "", dx: "", dy: "", xPum: "", yPum: "", }; },
3.js代码
methods: { callback() { this.$router.go(-1); }, onRefresh() { // window.location.reload(); setTimeout((res) => { console.log(res); this.isLoading = false; }, 1000); }, 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"); }, },
4.style样式
<style scoped> .callback p { font-size: 16px; color: #fff; background: rgba(56, 57, 58, 0.5); border-radius: 50%; text-align: center; width: 50px; height: 50px; line-height: 50px; font-family: PingFang SC; font-weight: 600; box-shadow: 0 0 10px #fff; } .callback img { display: block; width: 50px; height: 50px; box-shadow: 0 0 10px rgb(133, 129, 129); border-radius: 50%; background: #fff; } .callback { position: fixed; top: 40px; left: 20px; z-index: 99999; } .float { position: fixed; right: 20px; top: 60%; touch-action: none; text-align: center; width: 50px; height: 50px; border-radius: 24px; line-height: 48px; color: white; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- android 实现自由移动的悬浮按钮
- Vue实现按钮旋转和移动位置的实例代码
- 通过WindowManager实现可以移动的悬浮按钮
- 自定义悬浮按钮效果实现,带移动效果
- android实现 桌面移动悬浮窗口实现
- jq实现页面悬浮置顶按钮
- Android中可自由移动悬浮窗口的实现
- vue中用openlayers实现移动点动画
- 微信小程序开发详解---小知识,大功能【实现按钮的随着手指移动】
- listview 实现微信删除功能向左移动item出现隐藏的删除按钮功能终于实现了,分享总结一下。(跟微信删除一样额)
- Vue.js如何实现悬浮窗拖动
- Android利用悬浮按钮实现翻页效果
- vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
- Android 全界面悬浮按钮实现,you can do it!
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- WindowManager实现悬浮窗口&可自由移动的悬浮窗口
- jquery实现点击按钮左右移动的菜单
- iOS实现一个可以在屏幕中自由移动的按钮
- Android 4.x上适配设置DialogFragment背景透明--可拓展实现悬浮关闭按钮
- qt通过点击按钮跳转当前图片坐标实现图片移动