vue的icon图标,vue使用iconfont
这篇文章主要为大家详细介绍了某视频剪辑软件实现移动端可拖拽式图标图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现移动端可拖拽式图标图标的具体代码，供大家参考，具体内容如下
需求描述：在移动端页面悬浮一个可随便拖拽的图标，类似于苹果手机的辅助触控小圆点，并且可随意拖动。
预览：
组件代码如下：
模板
div class= ys-float-BTN :style= { width :item width px ， height:itemHeight px ， left:left px ， top:top px}
ref=div
@click=onBtnClicked
插槽名称=图标/槽
SvgIcon:icon class= 长江闻婕达
:style={width:itemWidth px ， height:itemHeight px}/
/div
/模板
脚本
导出默认值{
名称：拖动图标，
道具：{
项目宽度：{
类型：数量，
默认值：40
},
项目高度：{
类型：数量，
默认值：40
},
间隙宽度：{
类型：数量，
默认值：10
},
系数高度：{
类型：数量，
默认值：0.8
}
},
已创建(){
这个。客户端宽度=文档。documentelement。客户端宽度；
这个。客户高度=文档。文档元素。客户身高；
这个。左=这个。客户宽度-这个。项目宽度-这个。间隙宽度；
这个。top=这个。客户身高*这个。系数高度；
},
已安装(){
这个. nextTick(()={
const div=this .$ refs.div
div。addevent侦听器(轻触开始，(e)={
e。停止传播();
div。风格。transition=“none”；
});
div。addevent侦听器( touch move ，(e)={
e。停止传播();
如果(例如，目标接触。长度===1){
让触摸=事件。目标触摸[0]；
这个。左=触摸。clientx-this.itemWidth/2;
这个。顶部=触摸。clienty-this.itemHeight/2;
}
},
错误的
);
div.addEventListener(touchend ，(e)={
e。停止传播();
div.style.transition=全是0.3s ；
如果(这个。留下了这个。客户端宽度/2){
这个。左=这个。客户宽度-这个。项目宽度-这个。间隙宽度；
}否则{
这个。左=这个。间隙宽度；
}
if(this.top=36)
{
这个。top=36这个。缝隙宽度
}
否则{
让底部=这个。客户身高-50-这个。物品高度-这个。分类间距
console.log(bottom，this.top)
if(this.top=bottom)
{
this.top=底部
}
}
});
});
},
方法：{
onBtnClicked(){
这个. emit( onfloatbtnttclicked )；
},
},
data(){
返回{
计时器：空，
当前顶部：0,
客户端宽度：0,
客户端高度：0,
左：0,
top:0，
}
}
}
/脚本
样式lang=scss 范围。ys-float-btn{
背景：rgba(56，181，77，1)；
box-shadow:0 2px 10px 0 rgba(0，0，0，0.1)；
边界半径：50%;
颜色：# 666666;
z指数：20;
过渡：全0.3秒
显示器：flex
伸缩方向：列；
对齐-内容：居中；
对齐-项目：居中；
位置：固定；
底部：20w
img{
宽度：50%;
身高：50%;
对象适合：包含；
margin-bottom:3px；
}
}。su_img{
宽度：40px
高度：40px
边距：8px 0 0
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。