Vue-elementUI实现操作栏位更多效果
【摘要】 项目开发过程中,需要实现操作栏位图标按钮与文字按钮切换效果,在实现文字按钮过程中,大致思路如下:操作栏位只展示前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)