vue实现移动端可拖拽式icon图标
时间：2022-09-03 10:56:02|栏目：vue|点击： 次
本文实例为大家分享了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>
