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

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-wechat-nav"
    }, [_c('a', {
      staticClass: "cap-wechat-nav__home",
      class: {
        'cap-wechat-nav__home--alone': _vm.navs.length === 0
      },
      attrs: {
        "href": _vm.homeUrl
      }
    }, [_c('van-icon', {
      staticClass: "cap-wechat-nav__home-icon",
      attrs: {
        "name": "wap-home"
      }
    })], 1), _c('ul', {
      staticClass: "cap-wechat-nav__items",
      class: ["cap-wechat-nav__items--" + _vm.navs.length]
    }, _vm._l(_vm.navs, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-wechat-nav__item"
      }, [_c('a', {
        staticClass: "cap-wechat-nav__link",
        attrs: {
          "href": _vm.computedLinkUrl(item)
        },
        on: {
          "click": function click($event) {
            _vm.handleLinkClick(item, index, $event);
          }
        }
      }, [item.second && item.second.length != 0 ? _c('van-icon', {
        staticClass: "cap-wechat-nav__more-icon",
        attrs: {
          "name": "wap-nav"
        }
      }) : _vm._e(), _vm._v("\n        " + _vm._s(item.title) + "\n      ")], 1), item.second && item.second.length != 0 ? _c('ul', {
        directives: [{
          name: "show",
          rawName: "v-show",
          value: _vm.subIndex === index,
          expression: "subIndex === index"
        }],
        staticClass: "cap-wechat-nav__subitems"
      }, _vm._l(item.second, function (subitem, subItemIndex) {
        return _c('li', {
          key: subItemIndex,
          staticClass: "cap-wechat-nav__subitem"
        }, [_c('a', {
          staticClass: "cap-wechat-nav__sublink",
          attrs: {
            "href": subitem.link_url
          }
        }, [_vm._v("\n            " + _vm._s(subitem.title) + "\n          ")])]);
      }), 0) : _vm._e()]);
    }), 0)]);
  },
  components: {
    'van-icon': _Icon
  },
  props: {
    navs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    homeUrl: String
  },
  data: function data() {
    return {
      subIndex: null
    };
  },
  methods: {
    computedLinkUrl: function computedLinkUrl(item) {
      if (item.second && item.second.length !== 0) {
        return 'javascript:void(0)';
      }

      return item.link_url;
    },
    handleLinkClick: function handleLinkClick(item, index, event) {
      if (item.second && item.second.length !== 0) {
        event.preventDefault();
      }

      this.subIndex = this.subIndex === index ? null : index;
    }
  }
};