项目中遇到菜单名长度超出,又不想更改宽度,可以通过截取title然后加上'...'和title来实现tooltip提示功能来达到优化,
若依的菜单名是layout/components/Sidebar/Item文件设置的下面是修改后的代码
<script>
export default {name: 'MenuItem',functional: true,props: {icon: {type: String,default: ''},title: {type: String,default: ''}},render(h, context) {const { icon, title } = context.props;const vnodes = [];if (icon) {vnodes.push(<svg-icon icon-class={icon} />);}let truncatedTitle = title;if (title && title.length > 11) {truncatedTitle = title.substring(0, 8) + '...';}if (truncatedTitle) {if (truncatedTitle.length > 5) {vnodes.push(<span slot='title' title={title}>{truncatedTitle}</span>);} else {vnodes.push(<span slot='title'>{truncatedTitle}</span>);}}return vnodes;}
}
</script>