el-menu如何实现横向溢出截取

这篇文章主要介绍了el-menu如何实现横向溢出截取的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇el-menu如何实现横向溢出截取文章都会有所收获，下面我们一起来看看吧。

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-lastconst 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-lastconst 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,};

关于“el-menu如何实现横向溢出截取”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“el-menu如何实现横向溢出截取”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。