悬浮球总结

最新推荐文章于 2023-02-02 20:59:04 发布

xiaojing511

最新推荐文章于 2023-02-02 20:59:04 发布

阅读量241

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_46363790/article/details/115110112

版权

项目–小驴悬浮球

2021-1-21 20:21:48

分类专栏：vue

悬浮球演示

项目描述：小驴平台下帮助悬浮球，扫码入群
技术栈：vue
项目反思与总结：

悬浮球拖拽使用mousedown mousemove mpuseup 实现注： mousedown 和mouseup是优先于click事件执行
为了在移动元素的操作中不执行click事件，在执行click事件时不调用mousedown和mouseup方法、设置全局标志值判断是否移动了（mousedown时标志位置1，mousemove时标志位置0）来仿click事件<在mouseup中判断>（不移动也就是没有mousemove事件（flag == 1））移动则置回0
拖拽过快导致拖拽停止：在拖拽时若脱离拖拽元素则选中window.event
拖拽元素中的图片或文字导致拖拽失效：投机取巧解决法（图片设置为背景图片文字使用template v-if控制显隐）
拖拽时文字和弹窗被选中：使用css取消文字默认被选中效果
-moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none;
点击目标元素之外的区域时隐藏弹窗：在mounted监听document click事件

document.onclick = (e) => {
      if (!e.target.className || !e.target.className.includes("floatBall")) {
        this.isFloatWindowShow = false;
      }
    };

hover时显示弹窗移出隐藏：点击使弹窗关闭后再次移入移出有hover效果点击使弹窗打开后在移出时不隐藏弹窗（无hover效果）设置标志位 (isClick默认为false)
在mouseover时且 !hasMove时触发hover显示弹窗
在点击事件中设定标志位（点击且弹窗显示时设为false 点击且弹窗隐藏时设为true）
在mouseout中根据标志位(!isClick)隐藏弹窗
若只需要悬浮球变换样式而不显示弹窗则需添加悬浮球样式标志位
决策定位：离默认定位近的方位（默认定位到右下用right bottom）
注意：ui图使用二倍图更清晰
更换二维码使用postman工具更换二维码的线上地址使用xml提交
参考博客
不设置a标签跳转链接（创建元素）封装函数在需要跳转时调用

 const ele = document.createElement("a");
      document.body.appendChild(ele);
      ele.href = `${url.hemaOrigin}`;
      ele.target = "_blank";
      ele.click();
      document.body.removeChild(ele);

利用vue中的过滤器filter实现文字超出指定长度显示省略号

<span class="icon">{{item.hashName | ellipsis}}</span>

filters: {
    //超过20位显示 ...
    ellipsis: function (value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },```