captain-ui/es/shop-nav/src/components/app3-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('div', {
      staticClass: "cap-app-nav",
      class: {
        'cap-app-nav--show': _vm.subShow,
        'cap-app-nav--hide': !_vm.subShow,
        'cap-app4-nav': +_vm.navStyle === 4,
        'cap-app5-nav': +_vm.navStyle === 5
      }
    }, [_c('ul', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.subShow,
        expression: "subShow"
      }],
      staticClass: "cap-app-nav__subitems"
    }, _vm._l(_vm.navs, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-app-nav__subitem",
        class: ["cap-app" + _vm.navStyle + "-nav__subitem--" + _vm.navs.length + "-" + (index + 1)]
      }, [_c('a', {
        staticClass: "cap-app-nav__sublink",
        style: _vm.computeLinkStyle(item),
        attrs: {
          "href": item.link_url
        }
      })]);
    }), 0), _c('ul', {
      staticClass: "cap-app-nav__main"
    }, [_vm.hasMainNav ? [_c('li', {
      staticClass: "cap-app-nav__mainitem pull-left"
    }, [_c('a', {
      style: _vm.computeLinkStyle(_vm.mainNavs[0]),
      attrs: {
        "href": _vm.mainNavs[0].link_url
      }
    })])] : _vm._e(), _c('li', {
      staticClass: "cap-app-nav__mainitem cap-app-nav__mainitem--special",
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          _vm.subShow = !_vm.subShow;
        }
      }
    }, [_c('a', {
      attrs: {
        "href": "javascript:void(0)"
      }
    })]), _vm.hasMainNav ? [_c('li', {
      staticClass: "cap-app-nav__mainitem pull-right"
    }, [_c('a', {
      style: _vm.computeLinkStyle(_vm.mainNavs[1]),
      attrs: {
        "href": _vm.mainNavs[1].link_url
      }
    })])] : _vm._e()], 2)]);
  },
  props: {
    navs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    mainNavs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    navStyle: [String, Number]
  },
  data: function data() {
    return {
      subShow: false
    };
  },
  computed: {
    hasMainNav: function hasMainNav() {
      return +this.navStyle === 5;
    }
  },
  mounted: function mounted() {
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
    document.addEventListener('click', this.handleDocumentClick);
  },
  destroyed: function destroyed() {
    document.removeEventListener('click', this.handleDocumentClick);
  },
  methods: {
    computeLinkStyle: function computeLinkStyle(item) {
      if (item && item.image_url) {
        var imageUrl = urlHelper.getCdnImageUrl(item.isActived ? item.actived_image_url : item.image_url);
        return {
          'background-image': "url(" + imageUrl + ")"
        };
      }
    },
    handleDocumentClick: function handleDocumentClick() {
      this.subShow = false;
    }
  }
};