Vue-elementUI实现操作栏位更多效果

举报
SHQ5785 发表于 2023/02/19 09:33:27 2023/02/19
【摘要】 项目开发过程中,需要实现操作栏位图标按钮与文字按钮切换效果,在实现文字按钮过程中,大致思路如下:操作栏位只展示前2个菜单,之后的菜单采用更多方式展示,通过点击更多展示其余菜单按钮。实现代码如下:<template slot-scope="scope"> <el-dropdown :split-button="false" trigger="click" type="text" @comman...

项目开发过程中,需要实现操作栏位图标按钮与文字按钮切换效果,在实现文字按钮过程中,大致思路如下:操作栏位只展示前2个菜单,之后的菜单采用更多方式展示,通过点击更多展示其余菜单按钮。
实现代码如下:

<template slot-scope="scope">
	<el-dropdown :split-button="false" trigger="click" type="text" @command="handleCommand" class="dropdown el-dropdown-link">
    <span>
    	更多
        <i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
	    <el-dropdown-menu slot="dropdown" v-if="!!user.hobbies && user.hobbies.length > 0">
       	 <template v-for="item in user.hobbies">
            <el-dropdown-item @click.native="toMethod(item.methodnm, scope.row)">{{ item.name }}</el-dropdown-item>
      	  </template>
 	   </el-dropdown-menu>
	</el-dropdown>
</template>
<script>
	export default {
		methods: {
			toMethod (methodnm, inputParam) {
				switch (methodnm) {
					case 'a':
						aMethod(inputParam)
						break
					case 'b':
						aMethod(inputParam)
						break
					...
				}
			}
		}
	}
</script>

现象

在应用Webstorm进行开发相关工作时,发现IDE一直处于updating indices状态,根据错误提示,查看项目目录中.idea\workspace.xml文件,发现在进行git版本管理过程中,此文件进行了merge操作,结果导致文件中内容格式错乱,通过回退版本,发现问题并未解决,通过网络查询,可能是由于项目中node_modules文件文件过大,而且将该文件夹作为目录标记,解决方法就是右键node_modules,选择Mark Directory as->Excluded,会使IDEA排除index这个文件夹,问题得以解决。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。