vue基于 element-ui 实现菜单动画效果，任意添加 li 个数均匀撑满 ul 宽度

最新推荐文章于 2024-08-02 10:53:34 发布

weixin_33693070

最新推荐文章于 2024-08-02 10:53:34 发布

阅读量6.2k

点赞数

文章标签： javascript ui python ViewUI

原文链接：http://www.cnblogs.com/LindaBlog/p/10861105.html

版权

本文介绍如何在Vue项目中利用Element-UI库创建动态菜单，当鼠标悬停在图标上时，通过Tooltip展示对应的中文说明，实现菜单项随着li元素数量自动均匀填充ul宽度的效果。

摘要由CSDN通过智能技术生成

鼠标移至图标上时使用toolTip显示对应的中文提示文字

<div class= "em_tool" >
<win :id= " win. id " :data= " win " >
<div class= "nav" >
<input type= "checkbox" class= "nav__cb" id= "menu-cb" >
<div class= "nav__content" >
<ul class= "nav__items" id= "subnav" >
<li v-for= "(item,key) in tool " class= "nav__item" >

<el-tooltip class= "item" placement= "top-start" >
<div slot= "content" >{ {item. value}} </div>
<el-button :ref= "item. id " :icon= "item. icon " class= "nav__item-text" @click= " fn(item,key) " ></el-button>
</el-tooltip>
</li>
</ul>
</div>
<label class= "nav__btn" for= "menu-cb" ></label>
</div>
</win>
</div>
</template>

<script>
export default {
name: "em_tools" ,
components: {
win
} ,
data() {
return {
win: {
id: "em_tool" ,
title: "" ,
top: "86%" ,
show: true ,
width: 450 ,
resizable: false ,
class: "em-tool-window"
} ,
input: '' ,
tool: [
{ id: "tool_flyToScene" , value: "menu1" , icon: "el-icon-scene" , control_id: "scene" , fn: "toScene" , trigger: "none"} ,
{ id: "tool_transparent" , value: "menu2" , icon: "el-icon-transparent" , control_id: "em_slider" , fn: "showFn" , trigger: true} ,
{ id: "tool_coordinates" , value: "menu3" , icon: "el-icon-coordinates" , control_id: "scene" , fn: "xyz" , trigger: true} ,
{ id: "tool_data" , value: "menu4" , icon: "el-icon-data" , control_id: "scene" , fn: "scene_data" , trigger: true} ,
{ id: "tool_distance" , value: "menu5" , icon: "el-icon-distance" , control_id: "scene" , fn: "measure_drawLine" , trigger: "none"} ,
{ id: "tool_area" , value: "menu6" , icon: "el-icon-area" , control_id: "scene" , fn