移花宫资源网 Design By www.nbddc.com
本文实例为大家分享了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="/UploadFiles/2021-04-02/callbs.jpg">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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
移花宫资源网 Design By www.nbddc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
移花宫资源网 Design By www.nbddc.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年06月01日
2024年06月01日
- PUCK《天蓝色的彼岸》[FLAC/分轨][74.02MB]
- Edward Chan《Blueprint of Memories》[320K/MP3][48.3MB]
- 张敬轩.2007-MY1STCOLLECTION【环球】2CD【WAV+CUE】
- 著名歌手绝美音色经典老歌《超级音效王》DTS-WAV
- 流行靓声-群星《情网HQ》DTS[WAV]
- 群星《经典情歌对唱迟来的爱HQ》DTS[WAV]
- 群星2024《传承(太平洋影音四十五周年纪念专辑)4CD》[FLAC]
- 太平洋唱片中国轻音乐1-10全集[竹锦+影视篇+民歌篇+创作篇等]10CD[APE分轨+CUE]
- 群星《2024第一季度百度排行100首》[FLAC/分轨][2.3G]
- 证声音乐图书馆《聆听·心流·爵士 Flow Jazz》[320K/MP3][77.28MB]
- 证声音乐图书馆《聆听·心流·爵士 Flow Jazz》[FLAC/分轨][132.74MB]
- dnf手游为什么不上线了
- dnf手游韩服怎么重新转职
- 雷婷《婷婷醉歌》发烧版K2HD[正版CD低速原抓WAV+CUE]
- 西卿.1997-西北风(布袋戏精选)【金瓜石】【WAV+CUE】