vue 浮动按钮,vue悬浮可拖动插件

　　本文主要详细介绍vue对移动拖拽浮动按钮的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

功能介绍：

　　在移动终端的开发中，浮动按钮显示在侧面，不遮挡页面内容，手指可以拖动改变。

大致需求：

　　1.按钮以浮动的方式显示在页面的侧面；

　　2.用手指长按按钮，按钮会改变样式。允许拖放以改变其位置；

　　3.按钮移动时，松开手指，计算左右两边的距离并自动移动到一边显示；

　　4.移动到侧面后，按钮根据具体的左右位置改变实际样式；

整体思路：

　　1.按钮到位：固定布局，悬浮显示在页面两侧的顶层；

　　2.计时器可以用来判断手指是否长时间按下。如果手指松开，关闭计时器，等待下一次操作后再启用。

　　3.跟随手指移动计算按钮到页面两边的距离，判断手指松开时停留的位置；

　　简单效果显示：

具体实现：

一、position:fixed布局：

　　使用定位实现

　　！-外部ul控制卡系列-

　　差异

　　div class=floatBtn

　　:class=[{moveBtn: longClick}，` ${btnType}Btn`]

　　Span悬停按钮/span

　　/div

　　style lang=scss 范围

　　@mixin notSelect{

　　-moz-user-select:无；/* Firefox */

　　-WebKit-用户选择：无；/*webkit浏览器*/

　　-ms-user-select:无；/*IE10*/

　　-khtml-user-select:无；/*早期的浏览器*/

　　用户选择：无；

　　}

　　@mixin请勿触摸{

　　-webkit-touch-callout:无；

　　-WebKit-用户选择：无；

　　-khtml-user-select:无；

　　-moz-user-select:无；

　　-ms-user-select:无；

　　用户选择：无；

　　}。浮动

　　@ include notSelect

　　@ include not-touch()；

　　位置：固定；

　　z指数：1；

　　溢出：隐藏；

　　宽度：100px

　　左：calc(100%-100px)；

　　top:calc(100%-100px)；

　　颜色：# E0933A

　　背景：# FCEBD0

　　字体大小：14px

　　高度：36px

　　行高：36px

　　文本对齐：居中；

　　框大小：边框-框；

　　显示器：flex

　　justify-content:居中；

　　对齐-项目：居中；

　　填充：10px。rightBtn {

　　边框-半径：20px 0 0 20px

　　}。leftBtn {

　　border-radius:0 20px 20px 0；

　　}。moveBtn {

　　边框半径：20px

　　}

　　/风格

二、touch事件绑定：

　　应用于touchstart、touchmove、touchend事件，使用定时器实现长按效果：

　　div class=floatBtn

　　:class=[{moveBtn: longClick}，` ${btnType}Btn`]

　　@touchstart=touchstart($event)

　　@touchmove=touchMove($event)

　　@touchend=touchEnd($event)

　　Span悬停按钮/span

　　/div

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　超时事件：0，

　　longClick: 0

　　//手指的原始位置

　　oldMousePos: {}，

　　//元素的原始位置

　　oldNodePos: {}，

　　btnType:“右”

　　};

　　touchstart(ev) {

　　//定时器控制长按时间，500ms后开始拖动。

　　this . time out event=settime out(()={

　　this . long click=1；

　　}, 500);

　　const selectDom=ev . current target；

　　const { pageX，pageY }=ev . touches[0]；//手指位置

　　const { offsetLeft，offsetTop }=selectDom//元素位置

　　//手指的原始位置

　　this.oldMousePos={

　　x: pageX，

　　y:佩吉

　　};

　　//元素的原始位置

　　this.oldNodePos={

　　x: offsetLeft，

　　y:偏置

　　};

　　selectdom . style . left=` $ { offset left } px `；

　　select DOM . style . top=` $ { offsetTop } px `；

　　触摸移动(电动){

　　//如果在500ms之前移动，则不会触发长按，并清除计时器。

　　clear time out(this . time out event)；

　　if (this.longClick===1) {

　　const selectDom=ev . current target；

　　//x轴偏移

　　const lefts=this . oldmousepos . x-this . oldnodepos . x；

　　//y轴偏移量

　　const tops=this。oldmousepos。这个。oldnodepos。y；

　　const { pageX，pageY }=ev。触摸[0]；//手指位置

　　选择dom。风格。left=` $ { pageX-lefts } px `；

　　选择DOM。风格。top=` $ { pageY-tops } px `；

　　}

　　触摸端(电动汽车){

　　//清空定时器

　　清除超时(这。超时事件)；

　　if (this.longClick===1) {

　　这个。长点击=0；

　　const selectDom=ev。当前目标；

　　const {clientWidth，clientHeight }=document.body

　　const {offsetLeft，offsetTop }=selectDom

　　selectDom.style.left=

　　(offsetLeft 50) (clientWidth/2)？

　　calc(100%-100px):0；

　　如果(偏移量90) {

　　选择DOM。风格。top= 90px

　　} else if(offsetTop 36客户端高度){

　　选择DOM。风格。top=` $ { client height-36 } px `；

　　}

　　this.btnType=

　　(offsetLeft 50) (clientWidth/2)？

　　"右":"左";

　　}

　　};

　　/脚本

三、页面引入：

　　单个页面引入

　　模板

　　浮动tn/

　　/模板

　　脚本

　　从导入浮动块/浮动BTN ；

　　导出默认值{

　　组件：{

　　浮动长吨

　　};

　　/脚本

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。