movable-view动态direction无效果?
求高手指点,您好,小程序入门阶段,在社区看到您回复movable-view的问题,和我现在的情况很匹配,特此打扰请教下。用movable-view做缩放和拖拽操作,在获得目标区域后长按进行选中,希望长按后手指移动时原图不再被拖拽,尝试了两个方法,都没达到效果:
方法1,采用动态设置direction未能实现效果,结果是在js中把direction设置为none后还是可以拖动;
方法2,尝试了disabled方法,结果是增加了disabled参数后,无论设置为true还是false都无法拖拽。
参考了社区链接未能实现,最下面为我的代码,还请大神指点,万分感谢!!
<template>
<view>
<movable-area>
<movable-view
class="movable-view"
:direction="direction"
out-of-bounds="true"
[@change](/user/change)="onChange"
[@longtap](/user/longtap)='longtap'
[@scale](/user/scale)="onScale"
scale="true"
scale-value="1"
scale-min="1"
scale-max="4"
>
text
</movable-view>
</movable-area>
</view>
</template>
<script>
export default{
data() {
return {
direction:"all",
disabled:"false",
}
},
methods: {
//获取长按时的坐标
longtap(event){
this.direction = "none"
console.log(this.direction)
},
//响应拖动图片事件
onChange(event){
this.direction = "none"
console.log('123456732')
},
}
}
</script>
<style>
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 150rpx;
width: 150rpx;
background-color: \#007AFF;
color: \#fff;
}
movable-area {
height: 700rpx;
width: 100%;
background-color: \#D8D8D8;
overflow: hidden;
}
</style>