captain-ui/es/scroll-nav/src/main.js

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import "vant/es/icon/style";
import _Icon from "vant/es/icon";

var _components;

import fullfillImage from '@youzan/utils/fullfillImage';
import mapKeysToCamelCase from '@youzan/utils/string/mapKeysToCamelCase';
import Swiper from './components/swiper';
import Slide from './components/slide';
import setViewport from './utils/viewport';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-scroll-nav"
    }, [_vm.showHome ? _c('a', {
      attrs: {
        "href": _vm.homeLink
      }
    }, [_c('van-icon', {
      staticClass: "cap-scroll-nav__icon",
      attrs: {
        "name": "wap-home"
      }
    })], 1) : _vm._e(), _c('div', {
      staticClass: "cap-scroll-nav__bg",
      style: _vm.bgStyle
    }), _c('div', {
      class: _vm.maskClass
    }), _c('cap-scroll-nav-swiper', {
      attrs: {
        "need-animation": _vm.$attrs['need-animation']
      },
      on: {
        "toggle": _vm.onMaskToggle,
        "pagechange": _vm.onPageChange
      }
    }, _vm._l(_vm.list, function (item, index) {
      return _c('cap-scroll-nav-slide', {
        key: index,
        attrs: {
          "data-index": index,
          "active": index === _vm.activeSlide,
          "data": item,
          "nav-animation": _vm.$attrs['nav-animation'],
          "nav-style": _vm.$attrs['nav-style']
        }
      });
    }), 1)], 1);
  },
  name: 'cap-scroll-nav',
  components: (_components = {}, _components[_Icon.name] = _Icon, _components[Swiper.name] = Swiper, _components[Slide.name] = Slide, _components),
  inheritAttrs: false,
  props: {
    showHome: {
      type: Boolean,
      required: true,
      default: true
    },
    bgList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    navList: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  data: function data() {
    var global = window._global;
    var homeLink = global.url.wap + "/showcase/home?kdt_id=" + global.kdt_id;
    var defaultList = new Array(2).fill({
      title: '标题',
      sub_title: '副标题' // eslint-disable-line

    });
    var list = mapKeysToCamelCase(_extends(defaultList, this.navList));
    return {
      showMask: false,
      homeList: homeLink,
      list: list,
      activeSlide: 0,
      addAnimation: false
    };
  },
  computed: {
    bgUrl: function bgUrl() {
      var randomIndex = Math.floor(Math.random() * this.bgList.length);

      if (this.bgList.length > 0) {
        return fullfillImage(this.bgList[randomIndex], '!640x320.jpg');
      }

      return 'https://b.yzcdn.cn/v2/image/scroll_nav/default.gif';
    },
    bgStyle: function bgStyle() {
      // 若有多张背景图传入，随机
      return {
        backgroundImage: "url(" + this.bgUrl + ")"
      };
    },
    maskClass: function maskClass() {
      return ['cap-scroll-nav__mask', {
        'cap-scroll-nav__mask--show': this.showMask
      }];
    }
  },
  watch: {
    activeSlide: function activeSlide(val) {
      if (val === 0) {
        this.showMask = false;
      } else {
        this.showMask = true;
      }
    }
  },
  created: function created() {
    setViewport();
  },
  methods: {
    onMaskToggle: function onMaskToggle(val) {
      this.showMask = val;
    },
    onPageChange: function onPageChange(index) {
      this.activeSlide = index;
    },
    onSlideShow: function onSlideShow(index) {
      if (index <= 1) {
        return true;
      }
    }
  }
};