vue 浮动按钮,vue悬浮窗
这篇文章主要为大家详细介绍了某视频剪辑软件实现可移动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现可随处移动悬浮按钮的具体代码，供大家参考，具体内容如下
1.html代码
差异
class=回调浮点型
@click=onClick
@mousedown=down
@touchstart=down
@mousemove=move
@touchmove=move
@mouseup=end
@touchend=end
ref=fu
！- p @click=回调返回/p -
img @ click= callback src= @/assets/images/call bs。jpg alt/
/div
2.再数据中定义
data() {
返回{
isLoading: false，
标志：false，//控制使用
职位：{
x: 0，
y: 0，
},
nx: ，
纽约： ,
dx: ，
死亡： ,
xPum: ，
yPum: ，
};
},
3.js代码
方法：{
回调(){
这个1000美元路由器。go(-1)；
},
onRefresh() {
//窗口。位置。重载()；
setTimeout((res)={
控制台。日志(分辨率)；
this.isLoading=false
}, 1000);
},
向下(){
this.flags=true
var touch
if (event.touches) {
触摸=事件。触摸[0]；
}否则{
触摸=事件；
}
这个。位置。x=触摸。clientx
这个。位置。y=触摸。客户关系；
this.dx=this .$参考文献。傅。向左偏移；
this.dy=this .$参考文献。傅。offsettop
},
move() {
if (this.flags) {
var touch
if (event.touches) {
触摸=事件。触摸[0]；
}否则{
触摸=事件；
}
这个。NX=触摸。clientx-这个。位置。x；
这个。ny=触摸。客户-这个。位置。y；
这个。xpum=这个。dx这个。NX；
这个。ypum=这个。死了吧。ny；
设宽度=窗口。内部宽度-这个.$参考文献。傅。offsetwidth//屏幕宽度减去自身控件宽度
设高度=窗口。内在高度-这个.$参考文献。傅。偏高；//屏幕高度减去自身控件高度
这个。xpum 0(这个。xpum=0)；
这个。ypum 0(这个。ypum=0)；
this.xPum宽度(this.xPum=宽度);
这个。ypum身高(这个。ypum=身高)；
//如果(这个。xpum=0 this。ypum=0 this。xpum=宽度this。ypum=高度){
这个参考文献。傅。风格。左=这个。xpum“px”；
这个参考文献。傅。风格。top=这个。ypum“px”；
//}
//阻止页面的滑动默认事件
document.addEventListener(
触摸移动，
函数(){
事件。防止默认()；
},
错误的
);
}
},
//鼠标释放时候的函数
end() {
this.flags=false
},
onClick() {
//在这里我是作为子组件来使用的
这个. emit( click )；
},
},
4 .风格样式
样式范围。回拨p {
字体大小：16px
颜色：# fff
背景：rgba(56，57，58，0.5)；
边界半径：50%;
文本对齐：居中；
宽度：50px
高度：50px
行高：50px
字体系列：方平SC；
字体粗细：600;
box-shadow:0 0 10px # fff；
}。回拨img {
显示：块；
宽度：50px
高度：50px
方框阴影：0 0 10px rgb(133，129，129)；
边界半径：50%;
背景：# fff
}。回拨{
位置：固定；
top:40px；
左：20px
z指数：99999;
}。浮动{
位置：固定；
右：20px
top:60%；
触摸-动作：无；
文本对齐：居中；
宽度：50px
高度：50px
边框-半径：24px
行高：48px
颜色：白色；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。