这篇文章主要介绍了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-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,
};关于“el-menu如何实现横向溢出截取”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“el-menu如何实现横向溢出截取”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
