【vue-progress-button】源码研究

module.exports = function (t) {
  function e(r) {
    if (n[r]) return n[r].exports;
    var i = n[r] = {i: r, l: !1, exports: {}};
    return t[r].call(i.exports, i, i.exports, e), i.l = !0, i.exports
  }

  var n = {};
  return e.m = t, e.c = n, e.d = function (t, n, r) {
    e.o(t, n) || Object.defineProperty(t, n, {configurable: !1, enumerable: !0, get: r})
  }, e.n = function (t) {
    var n = t && t.__esModule ? function () {
      return t.default
    } : function () {
      return t
    };
    return e.d(n, "a", n), n
  }, e.o = function (t, e) {
    return Object.prototype.hasOwnProperty.call(t, e)
  }, e.p = "/dist/", e(e.s = 1)
}([function (t, e, n) {
  "use strict";
  e.a = {
    name: "VueProgressButton",
    props: {
      fillColor: {type: String, default: "#555"},
      duration: {type: Number, default: 2e3},
      height: {type: Number, default: 100},
      position: {type: String, default: "fill"}
    },
    data: function () {
      return {isActive: !1, timer: null, percent: 0, steps: 200}
    },
    computed: {
      intervalDuration: function () {
        return this.duration / this.steps
      },
      isActivated: function () {
        return this.isActive
      },
      styling: function () {
        var t = {width: this.percent + "%", "background-color": this.fillColor};
        switch (this.position) {
          case"top":
            t.height = this.height + "px", t.top = 0;
            break;
          case"bottom":
            t.height = this.height + "px", t.bottom = 0;
            break;
          default:
            t.top = 0, t.bottom = 0
        }
        return t
      }
    },
    methods: {
      click: function (t) {
        this.start(), this.$emit("click", t)
      },
      start: function () {
        var t = this;
        this.isActive = !0, this.timer = setInterval(function () {
          t.increase(Math.random()), t.percent >= 100 && t.end()
        }, this.intervalDuration)
      },
      set: function (t) {
        this.percent = Math.round(t)
      },
      increase: function (t) {
        this.set(this.percent + t)
      },
      decrease: function (t) {
        this.set(this.percent - t)
      },
      end: function () {
        var t = this;
        this.set(100), setTimeout(function () {
          t.isActive = !1, clearTimeout(t.timer), t.set(0)
        }, 250)
      }
    }
  }
}, function (t, e, n) {
  t.exports = n(2)
}, function (t, e, n) {
  "use strict";
  Object.defineProperty(e, "__esModule", {value: !0});
  var r = n(3);
  e.default = r.a
}, function (t, e, n) {
  "use strict";

  function r(t) {
    n(4)
  }

  var i = n(0), o = n(10), s = n(9), a = r, u = s(i.a, o.a, !1, a, "data-v-ac48f7e0", null);
  e.a = u.exports
}, function (t, e, n) {
  var r = n(5);
  "string" == typeof r && (r = [[t.i, r, ""]]), r.locals && (t.exports = r.locals);
  n(7)("66132909", r, !0, {})
}, function (t, e, n) {
  e = t.exports = n(6)(!1), e.push([t.i, ".__progress-button[data-v-ac48f7e0]{position:relative}.__progress-button[data-v-ac48f7e0]:not(.active){cursor:pointer}.__progress-button .__progress-button-content[data-v-ac48f7e0]{position:relative;z-index:10;opacity:1}.__progress-button .__progress[data-v-ac48f7e0]{width:0;z-index:5;opacity:0;transition:all 0s ease;position:absolute;left:0;right:0}.__progress-button.active .__progress[data-v-ac48f7e0]{opacity:1;transition-timing-function:ease}", ""])
}, function (t, e) {
  function n(t, e) {
    var n = t[1] || "", i = t[3];
    if (!i) return n;
    if (e && "function" == typeof btoa) {
      var o = r(i);
      return [n].concat(i.sources.map(function (t) {
        return "/*# sourceURL=" + i.sourceRoot + t + " */"
      })).concat([o]).join("\n")
    }
    return [n].join("\n")
  }

  function r(t) {
    return "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(t)))) + " */"
  }

  t.exports = function (t) {
    var e = [];
    return e.toString = function () {
      return this.map(function (e) {
        var r = n(e, t);
        return e[2] ? "@media " + e[2] + "{" + r + "}" : r
      }).join("")
    }, e.i = function (t, n) {
      "string" == typeof t && (t = [[null, t, ""]]);
      for (var r = {}, i = 0; i < this.length; i++) {
        var o = this[i][0];
        "number" == typeof o && (r[o] = !0)
      }
      for (i = 0; i < t.length; i++) {
        var s = t[i];
        "number" == typeof s[0] && r[s[0]] || (n && !s[2] ? s[2] = n : n && (s[2] = "(" + s[2] + ") and (" + n + ")"), e.push(s))
      }
    }, e
  }
}, function (t, e, n) {
  function r(t) {
    for (var e = 0; e < t.length; e++) {
      var n = t[e], r = f[n.id];
      if (r) {
        r.refs++;
        for (var i = 0; i < r.parts.length; i++) r.parts[i](n.parts[i]);
        for (; i < n.parts.length; i++) r.parts.push(o(n.parts[i]));
        r.parts.length > n.parts.length && (r.parts.length = n.parts.length)
      } else {
        for (var s = [], i = 0; i < n.parts.length; i++) s.push(o(n.parts[i]));
        f[n.id] = {id: n.id, refs: 1, parts: s}
      }
    }
  }

  function i() {
    var t = document.createElement("style");
    return t.type = "text/css", p.appendChild(t), t
  }

  function o(t) {
    var e, n, r = document.querySelector("style[" + m + '~="' + t.id + '"]');
    if (r) {
      if (h) return v;
      r.parentNode.removeChild(r)
    }
    if (_) {
      var o = l++;
      r = d || (d = i()), e = s.bind(null, r, o, !1), n = s.bind(null, r, o, !0)
    } else r = i(), e = a.bind(null, r), n = function () {
      r.parentNode.removeChild(r)
    };
    return e(t), function (r) {
      if (r) {
        if (r.css === t.css && r.media === t.media && r.sourceMap === t.sourceMap) return;
        e(t = r)
      } else n()
    }
  }

  function s(t, e, n, r) {
    var i = n ? "" : r.css;
    if (t.styleSheet) t.styleSheet.cssText = b(e, i); else {
      var o = document.createTextNode(i), s = t.childNodes;
      s[e] && t.removeChild(s[e]), s.length ? t.insertBefore(o, s[e]) : t.appendChild(o)
    }
  }

  function a(t, e) {
    var n = e.css, r = e.media, i = e.sourceMap;
    if (r && t.setAttribute("media", r), g.ssrId && t.setAttribute(m, e.id), i && (n += "\n/*# sourceURL=" + i.sources[0] + " */", n += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(i)))) + " */"), t.styleSheet) t.styleSheet.cssText = n; else {
      for (; t.firstChild;) t.removeChild(t.firstChild);
      t.appendChild(document.createTextNode(n))
    }
  }

  var u = "undefined" != typeof document;
  if ("undefined" != typeof DEBUG && DEBUG && !u) throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");
  var c = n(8), f = {}, p = u && (document.head || document.getElementsByTagName("head")[0]), d = null, l = 0, h = !1,
    v = function () {
    }, g = null, m = "data-vue-ssr-id",
    _ = "undefined" != typeof navigator && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase());
  t.exports = function (t, e, n, i) {
    h = n, g = i || {};
    var o = c(t, e);
    return r(o), function (e) {
      for (var n = [], i = 0; i < o.length; i++) {
        var s = o[i], a = f[s.id];
        a.refs--, n.push(a)
      }
      e ? (o = c(t, e), r(o)) : o = [];
      for (var i = 0; i < n.length; i++) {
        var a = n[i];
        if (0 === a.refs) {
          for (var u = 0; u < a.parts.length; u++) a.parts[u]();
          delete f[a.id]
        }
      }
    }
  };
  var b = function () {
    var t = [];
    return function (e, n) {
      return t[e] = n, t.filter(Boolean).join("\n")
    }
  }()
}, function (t, e) {
  t.exports = function (t, e) {
    for (var n = [], r = {}, i = 0; i < e.length; i++) {
      var o = e[i], s = o[0], a = o[1], u = o[2], c = o[3], f = {id: t + ":" + i, css: a, media: u, sourceMap: c};
      r[s] ? r[s].parts.push(f) : n.push(r[s] = {id: s, parts: [f]})
    }
    return n
  }
}, function (t, e) {
  t.exports = function (t, e, n, r, i, o) {
    var s, a = t = t || {}, u = typeof t.default;
    "object" !== u && "function" !== u || (s = t, a = t.default);
    var c = "function" == typeof a ? a.options : a;
    e && (c.render = e.render, c.staticRenderFns = e.staticRenderFns, c._compiled = !0), n && (c.functional = !0), i && (c._scopeId = i);
    var f;
    if (o ? (f = function (t) {
      t = t || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, t || "undefined" == typeof __VUE_SSR_CONTEXT__ || (t = __VUE_SSR_CONTEXT__), r && r.call(this, t), t && t._registeredComponents && t._registeredComponents.add(o)
    }, c._ssrRegister = f) : r && (f = r), f) {
      var p = c.functional, d = p ? c.render : c.beforeCreate;
      p ? (c._injectStyles = f, c.render = function (t, e) {
        return f.call(e), d(t, e)
      }) : c.beforeCreate = d ? [].concat(d, f) : [f]
    }
    return {esModule: s, exports: a, options: c}
  }
}, function (t, e, n) {
  "use strict";
  var r = function () {
    var t = this, e = t.$createElement, n = t._self._c || e;
    return n("button", {
      staticClass: "__progress-button",
      class: {active: t.isActivated},
      attrs: {disabled: t.isActive, "data-progress-style": "fill-back"},
      on: {click: t.click}
    }, [n("div", {
      staticClass: "__progress",
      style: t.styling
    }), t._v(" "), n("div", {staticClass: "__progress-button-content"}, [t._t("default")], 2)])
  }, i = [], o = {render: r, staticRenderFns: i};
  e.a = o
}]);