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

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";
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-app1-nav",
      class: ["cap-app1-nav--" + _vm.navs.length],
      style: {
        'background-color': _vm.backgroundColor
      }
    }, _vm._l(_vm.navs, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-app1-nav__item"
      }, [_vm.useIcon ? _c('a', {
        staticClass: "cap-app1-nav__iconlink",
        style: {
          color: item.isActive ? _vm.activeColor : _vm.color
        },
        attrs: {
          "href": item.link_url
        }
      }, [_c('van-icon', {
        class: {
          'van-icon--dot': item.has_dot
        },
        attrs: {
          "name": item.icon_name
        }
      }), _c('span', {
        domProps: {
          "textContent": _vm._s(item.link_title)
        }
      })], 1) : _c('a', {
        staticClass: "cap-app1-nav__link",
        style: _vm.computeLinkStyle(item),
        attrs: {
          "href": item.link_url
        }
      })]);
    }), 0);
  },
  components: {
    'van-icon': _Icon
  },
  props: {
    backgroundColor: String,
    color: {
      type: String,
      default: '#000'
    },
    activeColor: {
      type: String,
      default: '#f44'
    },
    navs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    useIcon: Boolean
  },
  methods: {
    computeLinkStyle: function computeLinkStyle(item) {
      var imageWidth = (item.isActive ? +item.actived_image_width / 2 : +item.image_width / 2) + 'px';
      var imageHeight = (item.isActive ? +item.actived_image_height / 2 : +item.image_height / 2) + 'px';
      var style = {
        'background-size': imageWidth + ' ' + imageHeight
      };
      var imageUrl = urlHelper.getCdnImageUrl(item.isActive ? item.actived_image_url : item.image_url);

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

      return style;
    }
  }
};