Vue3 setup 纯手工实现 Mac fisheye doc

参考连接 ：http://interface.eyecon.ro/demos/fisheye.html
这里有更多参考： http://interface.eyecon.ro/demos/?page=demos

因为用jq和vue3结合，会比较麻烦，于是乎就自己拿代码，手动改造了一个

顶部fisheye效果

image.png

底部fisheye效果

image.png

以上效果是完全没有加入图片和样式的效果，如果需要，可以根据自己的需要调整样式

上代码：MacDockFishEyeMenu.vue

<template>
 
    <template v-if="direction === 'top'">
      <div class="fisheye" id="fisheye" ref="dockRef"> 
    <div class="fisheyeContainter" ref="containerRef">
      <a v-for="item in itemMenus" :key="item.id" class="fisheyeItem" href="javascript:void(0)" @click="item.click">
        <div>
          {{ item.title }}
          <div style="height: 15px">&nbsp;</div>
        </div>
      </a> 
    </div>
  </div>
    </template>
    <template v-if="direction === 'bottom'">
      <div class="fisheye" id="fisheye2" ref="dockRef"> 
    <div class="fisheyeContainter" ref="containerRef">
      <a v-for="item in itemMenus" :key="item.id" class="fisheyeItem2" href="javascript:void(0)" @click="item.click">
        <div>
          {{ item.title }}
          <div style="height: 15px">&nbsp;</div>
        </div>
      </a> 
    </div>
  </div>
    </template>
</template>
<script setup lang="ts">
import { nextTick } from "process";
import { ref,   onMounted } from "vue";

const dockRef = ref();
const containerRef = ref();
const itemMenus = ref([]);
const direction = ref('bottom')
 
const build = (itemMenuList ,options , valign="bottom")=> {
  itemMenus.value = itemMenuList;
  direction.value =valign;
  nextTick(() => {
    const el = dockRef.value; 
    el.fisheyeCfg = {
      items: containerRef.value.getElementsByTagName("a"),
      container: containerRef.value,
      pos: getPosition(el),
      ...options,
    };
    positionContainer(el, 0);
    window.addEventListener("resize", () => {
      el.fisheyeCfg.pos = getPosition(el);
      positionContainer(el, 0);
      positionItems(el);
    });
    positionItems(el);
    // 如果是图片，可以考虑使用这个，鼠标移入显示文字
    // el.fisheyeCfg.items.forEach((item) => {
    //   item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
    //     "none";
    //   // mouseover
    //   item.addEventListener("mouseover", () => {
    //     item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
    //       "block";
    //   });
    //   // mouseout
    //   item.addEventListener("mouseout", () => {
    //     item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
    //       "none";
    //   });
    // });
    document.addEventListener("mousemove", (e) => {
      var pointer = getPointer(e);
      var toAdd = 0;
      if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == "center") { 
        var posx =
          pointer.x -
          el.fisheyeCfg.pos.x -
          (el.offsetWidth -
            el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length) /
          2 -
          el.fisheyeCfg.itemWidth / 2;
      } else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == "right") {
        var posx =
          pointer.x -
          el.fisheyeCfg.pos.x -
          el.offsetWidth +
          el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length;
      } else {
        var posx = pointer.x - el.fisheyeCfg.pos.x;
      }
      var posy = Math.pow(
        pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2,
        2
      );
      for (let i = 0; i < el.fisheyeCfg.items.length; i++) {
        const nr = el.fisheyeCfg.items[i];
        var distance = Math.sqrt(
          Math.pow(posx - i * el.fisheyeCfg.itemWidth, 2) + posy
        );
        distance -= el.fisheyeCfg.itemWidth / 2;

        distance = distance < 0 ? 0 : distance;
        distance =
          distance > el.fisheyeCfg.proximity
            ? el.fisheyeCfg.proximity
            : distance;
        distance = el.fisheyeCfg.proximity - distance;

        var extraWidth =
          (el.fisheyeCfg.maxWidth * distance) / el.fisheyeCfg.proximity;
        var extraHeight =
          (el.fisheyeCfg.maxHeight * distance) / el.fisheyeCfg.proximity;
        nr.style.width = el.fisheyeCfg.itemWidth + extraWidth + "px";
        nr.style.height = el.fisheyeCfg.itemHeight + extraHeight + "px";
        nr.style.left =
          el.fisheyeCfg.itemWidth * i + i * el.fisheyeCfg.gap + toAdd + "px";
        toAdd += extraWidth;
      }
      // positionContainer(el, toAdd);
    });
    dockRef.value.addEventListener("mouseout", (e) => {
      positionItems(el);
    });
    window.addEventListener("mouseleave", function () {
      positionItems(el);
    });
    document.addEventListener("mouseleave", function () {
      positionItems(el);
    });
  });
};
const getPointer = (event) => {
  var x =
    event.pageX ||
    event.clientX +
    (document.documentElement.scrollLeft || document.body.scrollLeft) ||
    0;
  var y =
    event.pageY ||
    event.clientY +
    (document.documentElement.scrollTop || document.body.scrollTop) ||
    0;
  return { x: x, y: y };
};

const getPosition = (e) => {
  var x = 0;
  var y = 0;
  var es = e.style;
  var restoreStyles = false;
  if (e.style.display == "none") {
    var oldVisibility = es.visibility;
    var oldPosition = es.position;
    restoreStyles = true;
    es.visibility = "hidden";
    es.display = "block";
    es.position = "absolute";
  }
  var el = e;
  while (el) {
    x +=
      el.offsetLeft +
      (el.currentStyle && !isOpera()
        ? parseInt(el.currentStyle.borderLeftWidth) || 0
        : 0);
    y +=
      el.offsetTop +
      (el.currentStyle && !isOpera()
        ? parseInt(el.currentStyle.borderTopWidth) || 0
        : 0);
    el = el.offsetParent;
  }
  el = e;
  while (el && el.tagName && el.tagName.toLowerCase() != "body") {
    x -= el.scrollLeft || 0;
    y -= el.scrollTop || 0;
    el = el.parentNode;
  }
  if (restoreStyles == true) {
    es.display = "none";
    es.position = oldPosition;
    es.visibility = oldVisibility;
  }
  return { x: x, y: y };
};

const positionContainer = (el, toAdd) => {
  if (el.fisheyeCfg.halign)
    if (el.fisheyeCfg.halign == "center")
      el.fisheyeCfg.items[0].style.left =
        (el.offsetWidth -
          el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length) /
        2 -
        toAdd / 2 +
        "px";
    else if (el.fisheyeCfg.halign == "left")
      el.fisheyeCfg.items[0].style.left =
        -toAdd / el.fisheyeCfg.items.length + "px";
    else if (el.fisheyeCfg.halign == "right")
      el.fisheyeCfg.items[0].style.left =
        el.offsetWidth -
        el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length -
        toAdd / 2 +
        "px";
  el.fisheyeCfg.items[0].style.width =
    el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length + toAdd + "px";
};

const positionItems = (el) => {
  if (itemMenus.value.length > 0) {
    for (let i = 0; i < el.fisheyeCfg.items.length; i++) {
      const nr = el.fisheyeCfg.items[i];
      nr.style.width = el.fisheyeCfg.itemWidth + "px";
      nr.style.left = el.fisheyeCfg.itemWidth * i + i * el.fisheyeCfg.gap + "px";
    }
  }

};

const myBrowser = () => {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1;
  if (isOpera) {
    return "Opera";
  } //判断是否Opera浏览器

  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  } //判断是否Firefox浏览器

  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  }

  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  } //判断是否Safari浏览器

  if (
    userAgent.indexOf("compatible") > -1 &&
    userAgent.indexOf("MSIE") > -1 &&
    !isOpera
  ) {
    return "IE";
  } //判断是否IE浏览器
};

const isOpera = () => {
  return myBrowser() === "Opera";
};


defineExpose({
  initFishEye: build
})

onMounted(() => {
  
});
</script>
<style scoped>
.fisheye {
  text-align: center;
  position: relative;
}

a.fisheyeItem2 {
  text-align: center;
  color: #e9f6f9;
  font-weight: bold;
  text-decoration: none;
  bottom: 0;

  /* background-image: url("/imgs/appcenter/group_default.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
  background-color: green;

  display: flex;
  justify-content: center;
  align-items: center;
}

a.fisheyeItem2:hover {
  /* background-image: url("/imgs/appcenter/group_select.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
  background-color: aquamarine;
}

.fisheyeItem2 img {
  border: none;
  margin: 5px auto 0 auto;
  width: 100%;
}

.fisheyeContainter {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#fisheye2 {
  position: absolute;
  width: 100%;
  bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: auto;
}

.fisheyeItem span,
.fisheyeItem2 span {
  display: none;
}

a.fisheyeItem {
  text-align: center;
  color: #000;
  font-weight: bold;
  text-decoration: none;  

  background-color: green;

display: flex;
justify-content: center;
align-items: center;
}

a.fisheyeItem:hover { 
  background-color: aquamarine;
}

.fisheyeItem img {
  border: none;
  margin: 0 auto 5px auto;
  width: 100%;
}

 
</style>

菜单测试代码 Test.vue

<template>


<div> 
    <MacDockFishEyeMenu ref="macDockMenuRef"></MacDockFishEyeMenu> 
</div>
</template>
<script setup lang="ts">
import { onMounted  ,ref} from 'vue';
import MacDockFishEyeMenu from  './MacDockFishEyeMenu.vue'
 
const macDockMenuRef = ref();

onMounted(()=>{
    setTimeout(() => {
    //模拟请求
    const itemMenus = [
      {
        id: 1,
        icon: null,
        title: "1111",
        click: (evt) => { },
      },
      {
        id: 2,
        icon: null,
        title: "2222",
        click: (evt) => { },
      },
      {
        id: 3,
        icon: null,
        title: "3333",
        click: (evt) => { },
      },
      {
        id: 4,
        icon: null,
        title: "4444",
        click: (evt) => { },
      },
      {
        id: 5,
        icon: null,
        title: "5555",
        click: (evt) => { },
      },
    ];

    const options = {
        maxWidth: 96, //单个菜单项，最大宽度
       maxHeight: 65, //单个菜单项最大高度
    itemsText: "span", //图片时，用这个来显示字符
    itemWidth: 85, //单个菜单项默认宽度
    itemHeight: 56, //单个菜单项默认高度
    proximity: 80,  // 不用改
    alignment: "left",  //不用改
    halign: "center", // 不用改
    gap: 10, // 两个菜单之间间距
    }

    macDockMenuRef.value.initFishEye(itemMenus,options,'top') ; //顶部

   // macDockMenuRef.value.initFishEye(itemMenus,options,'bottom'); //底部

   
  }, 100)
})

</script>