vue iview Menu改造为五边形菜单

如下图所示：

代码展示：

<template><Row class="shiftView"><Col class="shiftLeft"><Menuref="menuListBoxRef":active-name="curTab"theme="light"width="auto"@on-select="handleClick"><MenuItemv-for="item in typeList":class="{shiftBtn: true,pentagon: item.giao,lastBtn: item.lastBtn,}":key="item.id":name="item.id">{{ item.menuName }}</MenuItem></Menu></Col><Col class="shiftRight"><div class="shiftBox">这里是 {{ typeList[curTab - 1].menuName }} 的内容</div></Col></Row>
</template>
<script>
export default {data () {return {curTab: '1',typeList: [{ id: '1', menuName: '菜单1', giao: true },{ id: '2', menuName: '菜单1-1' },{ id: '3', menuName: '菜单1-2', lastBtn: true },{ id: '4', menuName: '菜单2', giao: true },{ id: '5', menuName: '菜单2-1' },{ id: '6', menuName: '菜单2-2' },]}},methods: {handleClick (e) {this.curTab = e}},mounted () {}
}
</script>
<style lang="less" scoped>
.shiftView {height: 100%;width: 100%;overflow: hidden;.shiftLeft {width: 240px;height: 100%;overflow-y: auto;float: left;.ivu-menu-light {background-color: #ebeef5;}.ivu-menu {z-index: 2;}.shiftBtn {transition: none;width: 100%;border-radius: 0px;border-top: 5px solid #ebeef5;height: 55px;text-align: left;border-bottom: 1px solid #ebeef5;color: #303133;background-color: #fff;&:hover {color: #fff;background-color: #2c85d9;&.pentagon {background-color: #2c85d9;}&.pentagon::before {border-top: 15px solid #2c85d9;}}&:first-child {margin-top: 0px;}&.ivu-menu-item-active:not(.ivu-menu-submenu) {background-color: #0d569b;color: #ffffff;&:after {width: 0;}&.pentagon::before {border-top: 15px solid #0d569b;}}&.pentagon {font-size: 16px;text-align: center;position: relative;margin-bottom: 18px;background-color: #fff;}&.pentagon::before {content: '';position: absolute;top: 49px;left: 0;border-top: 15px solid #fff;border-left: 120px solid transparent;border-right: 120px solid transparent;}&.lastBtn {margin-bottom: 60px;}}}.shiftRight {float: left;background-color: #ccc;width: calc(100% - 240px);}
}
</style>

参考来源： CSS绘制三角形和箭头，不用再用图片了

vue iview Menu改造为五边形菜单相关推荐

vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
vue 横向菜单滚动定位_使用vue组件+iscroll实现一个横向菜单，不能正确滑动
使用vue组件+iscroll实现一个横向菜单,可是却不能滑动,给父元素ul写死一个宽度可以滑动. 但是,我在computed里计算宽度,直接路由进去不能滑动,当我进入别的组件(切换路由)回来又可以滑 ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解（上）
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标.而我的图标是全局导入的,默认 ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...
公众号菜单代码 php,如何使用Vue.js实现微信公众号菜单编辑器（案例代码）
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(案例代码),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 实现菜单删除方法在vue实例中添加 ...
ASP.NET Menu控件子菜单弹出导致页面出现滚动条问题
ASP.NET Menu控件子菜单弹出的时候导致页面CSS属性的Min-Height产生变化,结果是原来全屏的画面,多出了纵滚动条.可以通过如下方法解决: 将ASP.NET控件放置到Table的单元格 ...

vue iview Menu改造为五边形菜单

vue iview Menu改造为五边形菜单相关推荐

最新文章

热门文章