vivo-ui/lib/components/fade/index.js

vivo ui component lib for vue

import '../../assets/common.css';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .src-components-fade-index--fade--2JJw2-enter, .src-components-fade-index--fade--2JJw2-leave-to { opacity: 0; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('transition', _vm._b({ attrs: { "name": _vm.$style.fade } }, 'transition', _vm.$attrs, false), [_vm._t("default", null, { className: _vm.className, styleObj: _vm.styleObj })], 2);
  }, staticRenderFns: [], cssModules: { "fade": "src-components-fade-index--fade--2JJw2" },
  name: 'fade',
  inheritAttrs: false,
  props: {
    speed: { // 过渡动画时间
      type: [String, Number],
      default: 'normal',
      validator: function validator(value) {
        return typeof value === 'number' || ['slow', 'normal', 'fast'].indexOf(value) !== -1;
      }
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    },
    styleObj: function styleObj() {
      // 如果duration是数字，则表示具体过渡时间
      return typeof this.speed === 'number' ? {
        transitionDuration: this.speed + 'ms'
      } : {};
    },
    className: function className() {
      // 根据duration设置类名
      return typeof this.speed === 'number' ? '' : 'va-fade-' + this.speed;
    }
  }
};

export default index;