captain-ui/lib/scroll/src/components/coffee.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _animate = _interopRequireDefault(require("../utils/animate"));

var FONT_FAMILY_LIST = ['Verdana', 'Geneva', 'Comic Sans MS', 'MS Serif', 'Lucida Sans Unicode', 'Times New Roman', 'Trebuchet MS', 'Arial', 'Courier New', 'Georgia']; // 生成唯一fly

var uid = 0;
var _default = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-scroll__coffee",
      style: "\n    left: " + _vm.wind.left + "px;\n    width: " + _vm.steamWidth + "px;\n    height: " + _vm.steamHeight + "px;\n    transition-duration: " + _vm.wind.duration + "s;\n  "
    }, [_c('transition-group', {
      attrs: {
        "name": "coffee",
        "tag": "div"
      },
      on: {
        "enter": _vm.enter
      }
    }, _vm._l(_vm.steams, function (item) {
      return _c('span', {
        key: item.id,
        staticClass: "cap-scroll__coffee-steam",
        style: "\n        position: absolute;\n        left: " + item.left + "px;\n        top: " + _vm.steamHeight + "px;\n        font-size: " + item.fontSize + "px;\n        font-family: " + item.fontFamily + ";\n        color: " + _vm.color + ";\n        opacity: 1;\n        z-index: 1000;\n        transform: rotate(" + item.rotate + "deg) scale(" + item.scale + ");\n      "
      }, [_vm._t("default")], 2);
    }), 0)], 1);
  },
  name: 'cap-scroll-coffee',
  props: {
    steamInterval: {
      type: Number,
      default: 1000
    },
    steamFlyTime: {
      type: Number,
      default: 5000
    },
    steamMaxSize: {
      type: Number,
      default: 10
    },
    steamWidth: {
      type: Number,
      default: 300
    },
    steamHeight: {
      type: Number,
      default: 200
    }
  },
  data: function data() {
    return {
      steams: [],
      wind: {
        left: 0,
        duration: 0
      },
      steamTimer: null,
      windTimer: null,
      duration: 0
    };
  },
  computed: {
    streamTime: function streamTime() {
      return this.randInt(this.steamInterval / 2, this.steamInterval * 2);
    },
    windTime: function windTime() {
      return this.randInt(100, 1000) + this.randInt(1000, 3000);
    }
  },
  created: function created() {
    this.init();
  },
  methods: {
    init: function init() {
      this.steamTimer = setInterval(this.setSteam, this.streamTime);
      this.windTimer = setInterval(this.setWind, this.windTime);
    },
    setSteam: function setSteam() {
      var _this = this;

      uid++;
      this.duration = this.randInt(this.steamFlyTime / 2, this.steamFlyTime * 1.2);
      this.steams.push({
        id: uid,
        fontSize: this.randInt(6, this.steamMaxSize),
        fontFamily: this.randoms(1, FONT_FAMILY_LIST),
        color: "#" + this.randoms(6, '0123456789abcdef'),
        left: this.randInt(20, 40),
        rotate: this.randInt(-90, 89),
        scale: this.randFloat(0.4, 1),
        zIndex: 20
      });

      (function (id) {
        setTimeout(function () {
          var order = _this.steams.findIndex(function (item) {
            return item.id === id;
          });

          _this.steams.splice(order, 1);
        }, _this.duration);
      })(uid);
    },
    setWind: function setWind() {
      var left = this.randInt(0, 40);
      this.wind = {
        left: left,
        duration: this.randInt(1000, 3000) / 1000
      };
    },
    enter: function enter(el, done) {
      var fromFrame = {
        top: +el.style.top.slice(0, -2),
        left: +el.style.left.slice(0, -2),
        opacity: 1
      };
      var toFrame = {
        top: this.randInt(0, this.steamHeight / 2),
        left: this.randInt(0, 40),
        opacity: 0
      };
      (0, _animate.default)(el, {
        from: fromFrame,
        to: toFrame,
        callback: done,
        duration: this.duration
      });
    },
    randoms: function randoms(length, chars) {
      length = length || 1;
      var hash = '';
      var num = 0;
      var maxNum = chars.length - 1;

      for (var i = 0; i < length; i++) {
        num = this.randInt(0, maxNum - 1);
        hash += chars.slice(num, num + 1);
      }

      return hash;
    },
    randInt: function randInt(min, max) {
      var range = max - min;
      var out = min + Math.round(Math.random() * range);
      return parseInt(out, 10);
    },
    randFloat: function randFloat(min, max) {
      var range = max - min;
      var out = min + Math.random() * range;
      return parseFloat(out, 10);
    }
  }
};
exports.default = _default;