captain-ui/es/placeholder/src/main.js

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _vm.visible ? _c('div', {
      staticClass: "cap-placeholder",
      class: (_obj = {
        'cap-placeholder--use-anim': _vm.useAnimation
      }, _obj["cap-placeholder--" + _vm.type] = _vm.type, _obj)
    }, [_vm.type === 'text' ? _vm._l(_vm.rows, function (row, index) {
      return _c('div', {
        key: index,
        staticClass: "cap-placeholder__text",
        style: _extends({}, _vm.rowStyle, {
          backgroundColor: _vm.color,
          backgroundClip: 'content-box'
        })
      });
    }) : _vm.type === 'rect' ? _c('div', {
      staticClass: "cap-placeholder__rect",
      style: _extends({}, _vm.rectStyle, {
        backgroundColor: _vm.color
      })
    }) : _c('div', {
      staticClass: "cap-placeholder__circle",
      style: _extends({}, _vm.circleStyle, {
        backgroundColor: _vm.color
      })
    })], 2) : _c('div', [_vm._t("default")], 2);

    var _obj;
  },
  name: 'cap-placeholder',
  props: {
    ready: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'text',
      validator: function validator(value) {
        return ['text', 'rect', 'circle'].indexOf(value) !== -1;
      }
    },
    rows: {
      type: Number,
      default: 1
    },
    color: {
      type: String,
      default: '#eee'
    },
    delay: {
      type: Number,
      default: 0
    },
    once: {
      type: Boolean,
      default: false
    },
    fontSize: {
      type: Number,
      default: 16
    },
    lineHeight: {
      type: Number,
      default: 22
    },
    rectStyle: {
      type: Object
    },
    circleStyle: {
      type: Object
    },
    useAnimation: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    var visible = !this.ready;

    if (!this.ready && this.delay > 0) {
      visible = false;
    }

    return {
      visible: visible
    };
  },
  computed: {
    rowStyle: function rowStyle() {
      var padding = Math.max((this.lineHeight - this.fontSize) / 2, 3);
      return {
        height: this.fontSize + "px",
        padding: padding + "px 0"
      };
    }
  },
  watch: {
    ready: function ready(val) {
      var _this = this;

      if (!val && this.once) {
        this.visible = false;
        return;
      }

      if (!val && this.delay > 0) {
        this._timer && clearTimeout(this._timer);
        this._timer = setTimeout(function () {
          if (!_this.ready) {
            _this.visible = true;
          }
        }, this.delay);
        return;
      }

      this.visible = !val;
    }
  },
  mounted: function mounted() {
    var _this2 = this;

    if (this.delay <= 0) {
      return;
    }

    this._timer = setTimeout(function () {
      if (!_this2.ready) {
        _this2.visible = true;
      }
    }, this.delay);
  },
  beforeDestroy: function beforeDestroy() {
    this._timer && clearTimeout(this._timer);
  }
};