shu-c-view/packages/nav-menu/more-menu.js

rollup 打包vue@2.7组件库框架

import _forEach from 'lodash/forEach';
import jQuery from 'jquery';
import _round from 'lodash/round';
import _isNil from 'lodash/isNil';

const moreMenu = {
  data() {
    this.itemRefList = null;
    this.itemBoxWidth = 0;
    return {
      isRenderLeftArrow: false,
      isRenderRightArrow: false,
      marginLeft: 0
    };
  },
  methods: {
    onLeftMargin() {
      // console.log('left');
      const $ = jQuery;
      this.isRenderLeftArrow = true;
      if (this.menuTrigger === 'click' && !_isNil(this.openMenuIndex)) {
        this.close(this.openMenuIndex);
      }
      this.$nextTick(() => {
        this.itemBoxWidth = _round(
          $(this.$refs.itemBoxRef).outerWidth(true, 0)
        );
        // console.log('itemBoxWidth: ', this.itemBoxWidth);
        let greaterBoxIndex = -1;
        let leftIndexSum = 0;
        // this.isRenderLeftArrow = true;
        _forEach(this.itemRefList, (itemEl, index) => {
          // console.log('itemEl: ', itemEl);
          const itemJQueryEl = $(itemEl);
          const { left } = itemJQueryEl.position(); // 父元素需要设置相对定位属性`position: relative;`
          const width = itemJQueryEl.outerWidth(true);
          // console.log('itemJQueryEl: ', itemJQueryEl, left, width);
          if (left + width - Math.abs(this.marginLeft) > this.itemBoxWidth) {
            greaterBoxIndex = index;
            return false;
          }
          leftIndexSum += 1;
          return true;
        });
        // console.log('leftIndexSum: ', leftIndexSum, this.itemRefList.length);
        const total = this.itemRefList.length;
        // console.log('total: ', total, greaterBoxIndex);
        if (leftIndexSum === total) {
          console.log('右侧已经没有被遮盖的了');
          this.isRenderRightArrow = false;
          return;
        }
        // console.log('greaterBoxIndex: ', greaterBoxIndex);
        if (greaterBoxIndex !== -1) {
          // const xcVal =0;
          const jQueryEl = $(this.itemRefList[greaterBoxIndex]);
          // console.log('jQueryEl: ', jQueryEl, jQueryEl.position());
          const leftVal =
            _round(jQueryEl.position().left, 0) - Math.abs(this.marginLeft);
          // console.log('leftVal: ', leftVal);
          const itemElWidth = jQueryEl.outerWidth(true);
          // console.log('itemElWidth: ', itemElWidth, this.itemBoxWidth, leftVal);
          const coverItemElWidth = _round(
            itemElWidth - (this.itemBoxWidth - leftVal),
            0
          );
          /* console.log(
            'coverItemElWidth: ',
            itemElWidth,
            this.itemBoxWidth,
            coverItemElWidth
          ); */
          if (coverItemElWidth === 0 && jQueryEl.next().length > 0) {
            this.marginLeft -= _round(jQueryEl.outerWidth(true), 0);
          } else {
            this.marginLeft -= coverItemElWidth;
          }
          // console.log('this.marginLeft: ', this.marginLeft);
          // this.leftTime += 1;
          if (leftIndexSum + 1 === total) {
            this.isRenderRightArrow = false;
          }
        }
      });
      /* const $ = window.jQuery;
       */
    },
    onRightMargin() {
      const $ = jQuery;
      // this.isRenderRightArrow = true;
      if (this.menuTrigger === 'click' && !_isNil(this.openMenuIndex)) {
        this.close(this.openMenuIndex);
      }
      this.$nextTick(() => {
        this.itemBoxWidth = _round($(this.$refs.itemBoxRef).outerWidth(), 0);
        // console.log('itemBoxWidth: ', this.itemBoxWidth);
        let greaterBoxIndex = -1;
        _forEach(this.itemRefList, (itemEl, index) => {
          const itemJQueryEl = $(itemEl);
          const { left } = itemJQueryEl.position();
          // console.log('index: ', index, left, this.marginLeft);
          // const width = itemJQueryEl.outerWidth();
          if (_round(Math.abs(this.marginLeft), 0) <= _round(left, 0)) {
            greaterBoxIndex = index;
            return false;
          }
          return true;
          /* if (left + width - Math.abs(this.marginLeft) > this.itemBoxWidth) {
          return false;
        }
        return true; */
        });
        if (this.marginLeft === 0) {
          console.log('左侧已经没有被遮盖的了');
          this.isRenderLeftArrow = false;
          return;
        }
        if (!this.isRenderRightArrow) {
          this.isRenderRightArrow = true;
        }
        if (greaterBoxIndex !== -1) {
          const curJQueryEl = $(this.itemRefList[greaterBoxIndex - 1]);
          /* console.log(
            'curJQueryEl: ',
            curJQueryEl,
            curJQueryEl.outerWidth(true)
          ); */
          const jQueryEl = $(this.itemRefList[greaterBoxIndex]);
          const position = jQueryEl.position();
          /* console.log(
            'position: ',
            jQueryEl,
            position,
            _round(position.left, 0)
          ); */
          const showItemElWidth =
            _round(position.left, 0) - Math.abs(this.marginLeft);
          // console.log('showItemElWidth: ', showItemElWidth);
          const coverItemWidth = _round(
            curJQueryEl.outerWidth(true) - showItemElWidth,
            0
          );
          // console.log('coverItemWidth: ', coverItemWidth);
          if (coverItemWidth === 0 && curJQueryEl.prev().length > 0) {
            this.marginLeft += _round(curJQueryEl.outerWidth(true), 0);
          } else {
            this.marginLeft += coverItemWidth;
          }
          /* if (coverItemWidth <= 10) {
            coverItemWidth = Math.abs(this.marginLeft) - coverItemWidth;
          } */
          if (this.marginLeft === 0) {
            this.isRenderLeftArrow = false;
          }
        }
      });
    }
  }
};

export default moreMenu;