captain-ui/es/tag-list/components/Nav.js

有赞vue wap业务组件库

import "vant/es/sidebar-item/style";
import _SidebarItem from "vant/es/sidebar-item";
import "vant/es/sidebar/style";
import _Sidebar from "vant/es/sidebar";

var _components;

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('van-sidebar', {
      staticClass: "cap-taglist-nav",
      style: _vm.positionStyle,
      attrs: {
        "active-key": _vm.active
      }
    }, _vm._l(_vm.tags, function (tag, index) {
      return _c('van-sidebar-item', {
        key: tag.alias,
        ref: "badges",
        refInFor: true,
        attrs: {
          "url": tag.url,
          "title": tag.title
        },
        on: {
          "click": function click($event) {
            _vm.onClick(index);
          }
        }
      });
    }), 1);
  },
  name: 'cap-taglist-nav',
  components: (_components = {}, _components[_Sidebar.name] = _Sidebar, _components[_SidebarItem.name] = _SidebarItem, _components),
  props: {
    tags: Array,
    active: Number,
    pagePosition: String,
    windowHeight: Number,
    navFixed: Boolean
  },
  data: function data() {
    return {
      innerActive: this.active
    };
  },
  computed: {
    positionStyle: function positionStyle() {
      if (this.navFixed) {
        return {};
      }

      var position = this.pagePosition === 'contain' ? 'fixed' : '';
      var bottom = this.pagePosition === 'below' ? 0 : '';
      var top = this.pagePosition !== 'below' ? '' : 'auto';
      var maxHeight = this.windowHeight + 'px';
      return {
        position: position,
        top: top,
        bottom: bottom,
        maxHeight: maxHeight
      };
    }
  },
  watch: {
    active: function active(_active) {
      if (!this.tags.length) {
        return;
      } // 如果是滚动页面导致的 active 切换，自动调整左侧滚动条位置


      if (_active !== this.innerActive) {
        var badge = this.$refs.badges[this.active];

        if (badge && badge.$el) {
          this.$el.scrollTop = badge.$el.offsetTop - 200;
        }
      }

      this.innerActive = _active;
    }
  },
  methods: {
    onClick: function onClick(index) {
      this.innerActive = index;
      this.$emit('click', index);
    }
  }
};