如何设置独特的鼠标点击效果?

先上效果图：

实现代码：

<script>
export default {
  name: "index",
  data() {
    return {
      txt: ["给个关注", "有求必应", "交个朋友", "多多留言", "点个赞吧"]
    };
  },
  beforeMount() {
    let _this = this;
    this.$nextTick(() => {
      let ele = document.getElementById("app"); // 获取根节点
      if (!ele) return; // 如果根节点不存在 则直接返回
      ele.addEventListener("click", element => {
        const LEFT = element.clientX;
        const TOP = element.clientY;
        let heart = document.createElement("b"); // 创建 ❤️ 元素
        heart.onselectstart = new Function("event.returnValue=false"); 
        document.body.appendChild(heart).innerHTML = `❤ ${_this.randomTxt()} ❤`; // 添加文案
        heart.style.cssText = "position: fixed;left:-100%;"; // 快捷给元素设置多个css属性
        var f = 16, // 字体大小
          x = event.clientX - f / 2, // 横坐标
          y = event.clientY - f, // 纵坐标
          c = _this.randomColor(), // 随机颜色
          a = 1, // 透明度
          s = 1.2; // 放大缩小

        var timer = setInterval(function() {
          if (a <= 0) {
            document.body.removeChild(heart);
            clearInterval(timer);
          } else {
            heart.style.cssText =
              "font-size:16px;cursor: default;position: fixed;color:" +
              c +
              ";left:" +
              x +
              "px;top:" +
              y +
              "px;opacity:" +
              a +
              ";transform:scale(" +
              s +
              ");";

            y--;
            a -= 0.016;
            s += 0.002;
          }
        }, 12);
      });
    });
  },
  methods: {
    // 随机文案
    randomTxt() {
      let index = Math.floor(Math.random() * 5);
      return this.txt[index];
    },
    // 随机颜色
    randomColor() {
      return (
        "rgb(" +
        ~~(Math.random() * 255) +
        "," +
        ~~(Math.random() * 255) +
        "," +
        ~~(Math.random() * 255) +
        ")"
      );
    }
  }
};
</script> 

如果想全局添加该效果，可将该文件混入到App.vue即可