captain-ui/es/shop-nav/src/components/app2-nav.js

有赞vue wap业务组件库

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

    var _h = _vm.$createElement;

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

    return _c('ul', {
      staticClass: "cap-app2-nav",
      style: {
        'background-color': _vm.backgroundColor
      }
    }, [_vm._l(_vm.leftNavs, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-app2-nav__item"
      }, [_c('a', {
        staticClass: "cap-app2-nav__link",
        style: _vm.computeLinkStyle(item),
        attrs: {
          "href": item.link_url
        }
      })]);
    }), _c('li', {
      staticClass: "cap-app2-nav__item cap-app2-nav__item--main"
    }, [_c('a', {
      staticClass: "cap-app2-nav__link cap-app2-nav__main-link",
      style: _vm.computeLinkStyle(_vm.mainNavs[0], true),
      attrs: {
        "href": _vm.mainNavs[0].link_url
      }
    })]), _vm._l(_vm.rightNavs, function (item, index) {
      return _c('li', {
        key: index + _vm.leftNavs.length,
        staticClass: "cap-app2-nav__item"
      }, [_c('a', {
        staticClass: "cap-app2-nav__link",
        style: _vm.computeLinkStyle(item),
        attrs: {
          "href": item.link_url
        }
      })]);
    })], 2);
  },
  props: {
    navs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    mainNavs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    backgroundColor: String
  },
  computed: {
    leftNavs: function leftNavs() {
      var navs = this.navs;
      return navs.length === 0 ? [] : navs.slice(0, Math.ceil(navs.length / 2));
    },
    rightNavs: function rightNavs() {
      var navs = this.navs;
      return navs.length === 0 ? [] : navs.slice(Math.ceil(navs.length / 2));
    }
  },
  methods: {
    computeLinkStyle: function computeLinkStyle(item, isMainIcon) {
      var style = {};
      var imageUrl = urlHelper.getCdnImageUrl(item.isActive ? item.actived_image_url : item.image_url);

      if (item && item.image_url) {
        style['background-image'] = "url(" + imageUrl + ")";
      }

      if (isMainIcon) {
        style['border-color'] = this.backgroundColor;
      }

      return style;
    }
  }
};