vue实现移动端可拖拽式icon图标

 更新时间:2022年03月02日 17:12:37   作者:进了……  
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码,供大家参考,具体内容如下

需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动。

预览:

组件代码如下:

<template>
    <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}"
         ref="div"
         @click ="onBtnClicked">
        <slot name="icon"></slot>
        <SvgIcon :iconClass="'changjianwentijieda'"
                 :style="{'width':itemWidth+'px','height':itemHeight+'px'}"/>
    </div>
</template>
 
 
<script>
    export default {
        name: "DragIcon",
        props:{
            itemWidth:{
                type:Number,
                default:40
            },
            itemHeight:{
                type:Number,
                default:40
            },
            gapWidth:{
                type:Number,
                default:10
            },
 
            coefficientHeight:{
                type:Number,
                default:0.8
            }
        },
        created(){
            this.clientWidth = document.documentElement.clientWidth;
            this.clientHeight = document.documentElement.clientHeight;
            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
            this.top = this.clientHeight*this.coefficientHeight;
        },
        mounted(){
            this.$nextTick(()=>{
                const div = this.$refs.div;
                div.addEventListener("touchstart",(e)=>{
                    e.stopPropagation();
                    div.style.transition = 'none';
                });
                div.addEventListener("touchmove",(e)=>{
                        e.stopPropagation();
                        if (e.targetTouches.length === 1) {
                            let touch = event.targetTouches[0];
                            this.left = touch.clientX - this.itemWidth/2;
                            this.top = touch.clientY - this.itemHeight/2;
                        }
                    },
                    false
                );
                div.addEventListener("touchend",(e)=>{
                    e.stopPropagation();
                    div.style.transition = 'all 0.3s';
                    if(this.left>this.clientWidth/2){
                        this.left = this.clientWidth - this.itemWidth - this.gapWidth;
                    }else{
                        this.left = this.gapWidth;
                    }
                    if(this.top<=36)
                    {
                        this.top=36+this.gapWidth
                    }
                    else{
                        let bottom=this.clientHeight-50-this.itemHeight-this.gapWidth
                        console.log(bottom,this.top)
                        if(this.top>=bottom)
                        {
                            this.top=bottom
                        }
 
                    }
                });
            });
        },
 
        methods:{
            onBtnClicked(){
                this.$emit("onFloatBtnClicked");
            },
 
        },
        data(){
            return{
                timer:null,
                currentTop:0,
                clientWidth:0,
                clientHeight:0,
                left:0,
                top:0,
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .ys-float-btn{
        background:rgba(56,181,77,1);
        box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);
        border-radius:50%;
        color: #666666;
        z-index: 20;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 20vw;
 
        img{
            width: 50%;
            height: 50%;
            object-fit: contain;
            margin-bottom: 3px;
        }
    }
    .su_img{
        width: 40px;
        height: 40px;
        margin: 8px 0 0 0;
    }
 
</style>

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

相关文章

  • element tree树形组件回显数据问题解决

    element tree树形组件回显数据问题解决

    本文主要介绍了element tree树形组件回显数据问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue 为什么要封装全局组件引入

    vue 为什么要封装全局组件引入

    这篇文章主要介绍了vue为什么要封装全局组件引入,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-07-07
  • 这15个Vue指令,让你的项目开发爽到爆

    这15个Vue指令,让你的项目开发爽到爆

    这篇文章主要介绍了这15个Vue指令,让你的项目开发爽到爆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-10-10
  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助
    2022-08-08
  • 在vue中实现日历功能的代码示例

    在vue中实现日历功能的代码示例

    在许多Web应用程序中,日历是一个常见的组件,它通常用于显示日期、安排会议、查看活动等,在Vue中,我们可以使用第三方库来轻松实现日历功能,也可以手动编写代码来实现日历的展示和操作,本文将介绍如何使用vue-calendar和手动编写代码来实现日历功能
    2023-07-07
  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    这篇文章主要介绍了Vue使用axios出现options请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue实现Excel预览功能使用场景示例详解

    Vue实现Excel预览功能使用场景示例详解

    这篇文章主要为大家介绍了Vue实现Excel预览功能使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    这篇文章主要介绍了vue项目如何引入element ui、iview和echarts,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue等两个接口都返回结果再执行下一步的实例

    vue等两个接口都返回结果再执行下一步的实例

    这篇文章主要介绍了vue等两个接口都返回结果再执行下一步的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue 2.0中生命周期与钩子函数的一些理解

    Vue 2.0中生命周期与钩子函数的一些理解

    这篇文章主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料,对大家学习或者使用vue2.0具有一定的参考学习价值,需要的朋友们下面随小编一起来看看吧。
    2017-05-05

最新评论