el-menu横向溢出截取

时间:2022-06-05 路耀广人气:0

antd的menu组件，会在subMenu超出的情况下对超出的subMenu进行截取。但是element的menu组件不会对溢出进行截取

于是我想对element的menu再次进行封装，让它能够支持宽度溢出截取。

思考

查看了antd的源码，还是比较复杂的，他会对每一个subMenu进行一份拷贝，然后隐藏在对应subMenu的后边，然后依赖于resize-observer-polyfill对menu和subMenu进行监听，然后计算超出的subMenu下标。代码量还是比较多的，看到最后有点迷糊。
后来我进行了一些思考，需求大概如下

通过resize-observer-polyfill对页面变化进行监听
计算宽度是否溢出，以及subMenu下标lastVisbileIndex是多少
渲染出溢出的subMenu集合
底层还是使用el-menu

代码部分

<template>
  <el-menu
    class="sweet-menu"
    v-bind="$attrs"
    v-on="$listeners"
 >
    <!-- 传入的menu  -->
    <slot />
    <!-- ...按钮 -->
    <sub-menu v-if="ellipsis" :list="overflowedElements" />
  </el-menu>
</template>

首先确定template部分仅仅是需要将传入的参数透传给el-menu，然后通过默认插槽的形式接收传入的子元素。最后渲染出溢出部分的展示开关。

//subMenu组件
export default {
  props: {
    list: {},
  },
  render(h) {
    return h('template', [
        h('el-submenu', {
        attrs: {
            key: 'overflow-menu',
            index: 'overflow-menu',
            'popper-append-to-body': true,
        },
        class: {
            'overflow-btn': true,
        },
    }, [
        h('span', { slot: 'title' }, '...'),
        ...this.list,
    ]),
    ]);
  },
};

subMenu组件的主要作用是渲染出传入的list，list其实就是一段从$slots.default中拿到的VNode列表。

import ResizeObserver from 'resize-observer-polyfill';
import subMenu from './subMenu.vue';
import { setStyle, getWidth, cloneElement } from './utils';
//偏差部分
const FLOAT_PRECISION_ADJUST = 0.5;
export default {
  name: 'SweetMenu',
  components: {
    subMenu,
  },
  data() {
    return {
      // 所有menu宽度总和
      originalTotalWidth: 0,
      resizeObserver: null,
      // 最后一个可展示menu的下标
      lastVisibleIndex: undefined,
      // 溢出的subMenus
      overflowedItems: [],
      overflowedElements: [],
      // 所有menu宽度集合
      menuItemSizes: [],
      lastChild: undefined,
      // 所有menu集合
      ulChildrenNodes: [],
      // 原始slots.defaule备份
      originSlots: [],
    };
  },
  computed: {
    ellipsis() {
      return this.$attrs?.mode === 'horizontal';
    },
  },
  mounted() {
    if (!this.ellipsis) return;
    // 备份slots.default
    this.originSlots = this.$slots.default.map((vnode) => cloneElement(vnode));
    // 拿到...按钮
    // eslint-disable-next-line prefer-destructuring
    this.lastChild = [].slice.call(this.$el.children, -1)[0];
    // 拿到所有li
    this.ulChildrenNodes = [].slice.call(this.$el.children, 0, -1);
    // 保存每个menu的宽度
    this.menuItemSizes = [].slice
      .call(this.ulChildrenNodes)
      .map((c) => getWidth(c));
    // 计算menu宽度总和
    this.originalTotalWidth = this.menuItemSizes.reduce(
      (acc, cur) => acc + cur,
      0,
    );
    // 注册监听事件
    this.$nextTick(() => {
      this.setChildrenWidthAndResize();
      if (this.$attrs.mode === 'horizontal') {
        const menuUl = this.$el;
        if (!menuUl) return;
        this.resizeObserver = new ResizeObserver((entries) => {
          entries.forEach(this.setChildrenWidthAndResize);
        });
        this.resizeObserver.observe(menuUl);
      }
    });
  },
  methods: {
    setChildrenWidthAndResize() {
      if (this.$attrs.mode !== 'horizontal' || !this.$el) return;
      const { lastChild, ulChildrenNodes } = this;
      // ...按钮的宽度
      const overflowedIndicatorWidth = getWidth(lastChild);
      if (!ulChildrenNodes || ulChildrenNodes.length === 0) {
        return;
      }
      // 拿到所有slots.default
      this.$slots.default = this.originSlots.map((vnode) => cloneElement(vnode));
      // 解决内容区撑开ul宽度问题
      ulChildrenNodes.forEach((c) => {
        setStyle(c, 'display', 'none');
      });
      // 获取el-menu宽度
      const width = getWidth(this.$el);
      // 可展示menu宽度总和
      let currentSumWidth = 0;
      // 最后一个可展示menu的下标
      let lastVisibleIndex;
      // 如果宽度溢出
      if (this.originalTotalWidth > width + FLOAT_PRECISION_ADJUST) {
        lastVisibleIndex = -1;
        this.menuItemSizes.forEach((liWidth) => {
          currentSumWidth += liWidth;
          if (currentSumWidth + overflowedIndicatorWidth <= width) {
            lastVisibleIndex += 1;
          }
        });
      }
      this.lastVisibleIndex = lastVisibleIndex;
      // 过滤menu相关dom
      this.overflowedItems = [].slice
        .call(ulChildrenNodes)
        .filter((c, index) => index > lastVisibleIndex);
      this.overflowedElements = this.$slots.default.filter(
        (c, index) => index > lastVisibleIndex,
      );
      // 展示所有li
      ulChildrenNodes.forEach((c) => {
        setStyle(c, 'display', 'inline-block');
      });
      // 对溢出li隐藏
      this.overflowedItems.forEach((c) => {
        setStyle(c, 'display', 'none');
      });
      // 判断是否需要显示...
      setStyle(
        this.lastChild,
        'display',
        lastVisibleIndex === undefined ? 'none' : 'inline-block',
      );
      // 去除隐藏的menu 解决hover时 被隐藏的menu弹窗同时出现问题
      this.$slots.default = this.$slots.default.filter((vnode, index) => index <= lastVisibleIndex);
    },
  },
};

在js部分，主要是对subMenu宽度进行了判断，通过menuItemSizes保存所有subMenu的宽度，然后拿到this.$el也就是容器ul的宽度。通过递增的方式，判断是否溢出，然后记录lastVisibleIndex。这里需要注意的就是记得要加上最后一个subMenu的宽度。

然后是一些css样式的处理

.sweet-menu {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
  ::v-deep & > .el-menu-item {
    position: relative;
  }
  ::v-deep .overflow-btn {
    .el-submenu__icon-arrow {
      display: none;
    }
  }
  ::v-deep .sweet-icon {
    margin-right: 0.5rem;
  }
}

这里我们只是对horizontal模式进行了处理，vertical模式还是兼容的，所以只需要像使用el-menu的方式进行使用就可以了

//utils.js部分
import classNames from 'classnames';

const camelizeRE = /-(\w)/g;
const camelize = (str) => str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));

export function isEmptyElement(c) {
    return !(c.tag || (c.text && c.text.trim() !== ''));
}
const filterEmpty = (children = []) => children.filter((c) => !isEmptyElement(c));
// eslint-disable-next-line default-param-last
const parseStyleText = (cssText = '', camel) => {
    const res = {};
    const listDelimiter = /;(?![^(]*\))/g;
    const propertyDelimiter = /:(.+)/;
    cssText.split(listDelimiter).forEach((item) => {
        if (item) {
            const tmp = item.split(propertyDelimiter);
            if (tmp.length > 1) {
                const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim();
                res[k] = tmp[1].trim();
            }
        }
    });
    return res;
};
function cloneVNodes(vnodes, deep) {
    const len = vnodes.length;
    const res = new Array(len);
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < len; i++) {
        // eslint-disable-next-line no-use-before-define
        res[i] = cloneVNode(vnodes[i], deep);
    }
    return res;
}

const cloneVNode = (vnode, deep) => {
    const { componentOptions } = vnode;
    const { data } = vnode;
    let listeners = {};
    if (componentOptions && componentOptions.listeners) {
        listeners = { ...componentOptions.listeners };
    }

    let on = {};
    if (data && data.on) {
        on = { ...data.on };
    }
    const cloned = new vnode.constructor(
        vnode.tag,
        data ? { ...data, on } : data,
        vnode.children,
        vnode.text,
        vnode.elm,
        vnode.context,
        componentOptions ? { ...componentOptions, listeners } : componentOptions,
        vnode.asyncFactory,
    );
    cloned.ns = vnode.ns;
    cloned.isStatic = vnode.isStatic;
    cloned.key = vnode.key;
    cloned.isComment = vnode.isComment;
    cloned.fnContext = vnode.fnContext;
    cloned.fnOptions = vnode.fnOptions;
    cloned.fnScopeId = vnode.fnScopeId;
    cloned.isCloned = true;
    if (deep) {
        if (vnode.children) {
            cloned.children = cloneVNodes(vnode.children, true);
        }
        if (componentOptions && componentOptions.children) {
            componentOptions.children = cloneVNodes(componentOptions.children, true);
        }
    }
    return cloned;
};
// eslint-disable-next-line default-param-last
const cloneElement = (n, nodeProps = {}, deep) => {
    let ele = n;
    if (Array.isArray(n)) {
        // eslint-disable-next-line prefer-destructuring
        ele = filterEmpty(n)[0];
    }
    if (!ele) {
        return null;
    }
    const node = cloneVNode(ele, deep);
    // // 函数式组件不支持clone  https://github.com/vueComponent/ant-design-vue/pull/1947
    // warning(
    //   !(node.fnOptions && node.fnOptions.functional),
    // );
    const {
        props = {}, key, on = {}, nativeOn = {}, children, directives = [],
    } = nodeProps;
    const data = node.data || {};
    let cls = {};
    let style = {};
    const {
        attrs = {},
        ref,
        domProps = {},
        style: tempStyle = {},
        class: tempCls = {},
        scopedSlots = {},
    } = nodeProps;

    if (typeof data.style === 'string') {
        style = parseStyleText(data.style);
    } else {
        style = { ...data.style, ...style };
    }
    if (typeof tempStyle === 'string') {
        style = { ...style, ...parseStyleText(style) };
    } else {
        style = { ...style, ...tempStyle };
    }

    if (typeof data.class === 'string' && data.class.trim() !== '') {
        data.class.split(' ').forEach((c) => {
            cls[c.trim()] = true;
        });
    } else if (Array.isArray(data.class)) {
        classNames(data.class)
            .split(' ')
            .forEach((c) => {
                cls[c.trim()] = true;
            });
    } else {
        cls = { ...data.class, ...cls };
    }
    if (typeof tempCls === 'string' && tempCls.trim() !== '') {
        tempCls.split(' ').forEach((c) => {
            cls[c.trim()] = true;
        });
    } else {
        cls = { ...cls, ...tempCls };
    }
    node.data = {
        ...data,
        style,
        attrs: { ...data.attrs, ...attrs },
        class: cls,
        domProps: { ...data.domProps, ...domProps },
        scopedSlots: { ...data.scopedSlots, ...scopedSlots },
        directives: [...(data.directives || []), ...directives],
    };

    if (node.componentOptions) {
        node.componentOptions.propsData = node.componentOptions.propsData || {};
        node.componentOptions.listeners = node.componentOptions.listeners || {};
        node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props };
        node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on };
        if (children) {
            node.componentOptions.children = children;
        }
    } else {
        if (children) {
            node.children = children;
        }
        node.data.on = { ...(node.data.on || {}), ...on };
    }
    node.data.on = { ...(node.data.on || {}), ...nativeOn };

    if (key !== undefined) {
        node.key = key;
        node.data.key = key;
    }
    if (typeof ref === 'string') {
        node.data.ref = ref;
    }
    return node;
};
const getWidth = (elem) => {
    let width = elem && typeof elem.getBoundingClientRect === 'function' && elem.getBoundingClientRect().width;
    if (width) {
        width = +width.toFixed(6);
    }
    return width || 0;
};
const setStyle = (elem, styleProperty, value) => {
    if (elem && typeof elem.style === 'object') {
        elem.style[styleProperty] = value;
    }
};
export {
    cloneElement,
    setStyle,
    getWidth,
};

总结

加载全部内容