captain-ui/es/scroll-nav/src/components/slide.js

有赞vue wap业务组件库

import fullfillImage from '@youzan/utils/fullfillImage';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      class: _vm.slideClass,
      style: _vm.slideStyle
    }, [_c('a', {
      staticClass: "cap-scroll-nav-slide__link",
      style: _vm.bgStyle,
      attrs: {
        "href": _vm.data.linkUrl
      }
    }, [_vm.showMask ? _c('span', {
      staticClass: "cap-scroll-nav-slide__mask"
    }) : _vm._e(), _vm.showTitle ? _c('span', {
      class: _vm.titleClass
    }, [_vm._v("\n      " + _vm._s(_vm.data.title) + "\n    ")]) : _vm._e(), _vm.showSubTitle ? _c('span', {
      class: _vm.subTitleClass
    }, [_vm._v("\n      " + _vm._s(_vm.data.subTitle) + "\n    ")]) : _vm._e()])]);
  },
  name: 'cap-scroll-nav-slide',
  props: {
    data: {
      type: Object,
      required: true
    },
    navStyle: {
      type: String,
      default: 'right'
    },
    navAnimation: {
      type: String,
      default: 'zoom_in'
    },
    active: Boolean
  },
  data: function data() {
    return {
      init: true
    };
  },
  computed: {
    bgStyle: function bgStyle() {
      return {
        backgroundImage: "url(" + fullfillImage(this.data.imageUrl, '!640x320.jpg') + ")"
      };
    },
    slideStyle: function slideStyle() {
      var index = this.$attrs['data-index'];

      if (index <= 1) {
        return {
          animation: "slide-up-" + this.navStyle + " .4s linear " + index * 0.1 + "s",
          animationFillMode: 'both'
        };
      }

      if (!this.init) {
        var animationType = this.navAnimation.replace(/_/, '-');
        return {
          animation: animationType + "-" + this.navStyle + " .4s",
          animationFillMode: 'both'
        };
      }

      return null;
    },
    slideClass: function slideClass() {
      return ['cap-scroll-nav-slide', "cap-scroll-nav-slide--" + this.navStyle];
    },
    titleClass: function titleClass() {
      return ['cap-scroll-nav-slide__title', "cap-scroll-nav-slide__title--" + this.navStyle];
    },
    subTitleClass: function subTitleClass() {
      return ['cap-scroll-nav-slide__sub-title', "cap-scroll-nav-slide__sub-title--" + this.navStyle];
    },
    showMask: function showMask() {
      return !!(this.data.title || this.data.subTitle);
    },
    showTitle: function showTitle() {
      return !!this.data.title;
    },
    showSubTitle: function showSubTitle() {
      return !!this.data.subTitle;
    }
  },
  watch: {
    active: function active(val) {
      if (val && this.init) {
        this.init = false;
      }
    }
  }
};