vue-rippler插件点击次数会使按钮颜色变深

发现

  • 因为插件使用document.querySelectorAll("[ripple]")获取元素,
  • 所以每次组件内的mounted钩子函数时都会通过addEventListener创建一次事件

解决:

var ripples = document.querySelectorAll("[ripple]") 改为 var ripples = this.$el.querySelectorAll ? this.$el.querySelectorAll("[ripple]") : [];

创建VueRippler.js

var VueRippler = {
  install: function install(Vue, options) {
    Vue.mixin({
      mounted: function mounted() {
        var length, bounce, ripple, rippleContainer;

        function debounce(func, delay) {
          return function () {
            var context = this,
              args = arguments;
            clearTimeout(bounce);

            return (bounce = setTimeout(function () {
              return func.apply(context, args);
            }, delay));
          };
        }

        function makeRipple(e) {
          ripple = this;
          var setRipple = document.createElement("span");
          setRipple.className = "ripple--body";

          var size = ripple.offsetWidth,
            pos = ripple.getBoundingClientRect(),
            x = e.clientX - pos.left - size / 2,
            y = e.clientY - pos.top - size / 2,
            style =
            "will-change: top, left, height, width, auto; zoom: 1; top: " +
            y +
            "px; left: " +
            x +
            "px; height: " +
            size +
            "px; width: " +
            size +
            "px;";

          ripple.rippleContainer.appendChild(setRipple);

          return setRipple.setAttribute("style", style);
        }

        function removeRipple() {
          while (this.rippleContainer.firstChild)
            this.rippleContainer.removeChild(this.rippleContainer.firstChild);
        }
        var ripples = this.$el.querySelectorAll ? this.$el.querySelectorAll("[ripple]") : [];
        for (var i = 0, length = ripples.length; i < length; i++) {
          ripple = ripples[i];
          ripple.style.overflow = "hidden";
          ripple.style.position = "relative";

          rippleContainer = document.createElement("div");
          rippleContainer.className = "ripple--container";
          rippleContainer.style.zoom = "1";
          rippleContainer.style.overflow = "hidden";
          rippleContainer.style.position = "absolute";
          rippleContainer.style.transform = "translate3d(0, 0, 0)";
          rippleContainer.style.webkitTransform = "translate3d(0, 0, 0)";
          rippleContainer.style.willChange = "top, left, right, bottom, auto";
          rippleContainer.style.top = "0";
          rippleContainer.style.left = "0";
          rippleContainer.style.right = "0";
          rippleContainer.style.bottom = "0";

          ripple.addEventListener('mousedown', makeRipple);
          ripple.addEventListener('onmouseup', debounce(removeRipple, 2000));
          ripple.rippleContainer = rippleContainer;
          ripple.appendChild(rippleContainer);
        }

        var styleEl = document.createElement("style");
        styleEl.innerHTML =
          "[ripple] .ripple--container .ripple--body {will-change:transform,opacity,auto;zoom:1;overflow:hidden;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;position:absolute;opacity:0.5;background-color:rgba(0,0,0,0.1);-webkit-animation:rippler 1000ms;-moz-animation:rippler 1000ms;-o-animation:rippler 1000ms;animation:rippler 1000ms;}@-webkit-keyframes rippler{to{opacity:0;-webkit-transform:scale(2);transform:scale(2);}}@-moz-keyframes rippler{to{opacity:0;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2);}}@-o-keyframes rippler{to{opacity:0;-webkit-transform:scale(2);-o-transform:scale(2);transform:scale(2);}}@keyframes rippler{to{opacity:0;-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);transform:scale(2);}}";
        styleEl.id = "ripple-effect-style";
        if (!document.getElementById("ripple-effect-style"))
          document.head.appendChild(styleEl);
      },
    });
  },
};

if (typeof window !== "undefined" && window.Vue) window.VueRippler = VueRippler;

export default VueRippler;

使用

import VueRippler from "@/plugins/VueRippler";
Vue.use(VueRippler);
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值