VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示
VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示:
- “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面
- 在VUE Node模式下设置变量、使用变量;
- 在VUE Node模式下使用鼠标移入移出点击事件;
- 在VUE Node模式下通过改变Class改变颜色、文字缩略等;
具体实现注意事项:
- 在VUE Node模式下通过改变Class改变颜色、文字缩略等
- 改变元素的显示要素(颜色、缩略、大小、背景等等)可以通过更改元素对应的Class实现;
-
class="clickedIndex==0?'click-color':'default-color'"
- 在VUE Node模式下设置变量、使用变量
- 变量不需要通过VAR等事先声明;
- 变量需要在data中return;
-
data() {return {oneLeverMenuClicked:false,twoLeverMenuClicked:false,clickedIndex:100,}}
- 在VUE Node模式下使用鼠标移入移出点击事件
- 鼠标移入移出点击事件函数在method中说明:
-
-
oneLeverenter:function(index){ this.clickedIndex=index; },oneLeverleave:function(index){ this.clickedIndex=100; },twoLeverenter:function(index){ this.clickedIndex=index; },twoLeverclick:function(index){if (index==2){this.oneLeverMenuClicked=!this.oneLeverMenuClicked;this.clickedIndex=index;};if (index==3){this.twoLeverMenuClicked=!this.twoLeverMenuClicked;this.clickedIndex=index;};}
-
<template> <div > <div class="expense-left"> <p class="left-titles">费用中心</p> <ul class="order-con"> <router-link to="/control-home/expense-center/my-order "> <li class="default-color" @mouseenter="oneLeverenter(0)" @mouseleave="oneLeverleave(0)" :class="clickedIndex==0?'click-color':'default-color'">你的订单可以在这里查询包括明细数据</li></router-link> <router-link to="/control-home/expense-center/renew-manage"><li class="default-color" @mouseenter="oneLeverenter(1)" @mouseleave="oneLeverleave(0)" :class="clickedIndex==1?'click-color':'default-color'">续费</li></router-link> <li class="default-color" @mouseenter="twoLeverenter(2)" @click="twoLeverclick(2)" :class="clickedIndex==2?'click-color':'default-color'">你的发票在这里可以查询明细</li> <ul class="order-child" v-show="oneLeverMenuClicked" > <li>发票索取</li> <li>发票列表</li> <li>发票信息管理</li> <li>发票寄送地址管理</li> </ul> <li class="default-color" @mouseenter="twoLeverenter(3)" @click="twoLeverclick(3)" :class="clickedIndex==3?'click-color':'default-color'">合同管理</li> <div > <ul class="order-child" v-show="twoLeverMenuClicked"> <li>合同申请</li> <li>合同管理</li> </ul> </div> </ul> </div> </div> </template> <script> export default { data() { return { oneLeverMenuClicked:false,//点击子列表显示隐藏 twoLeverMenuClicked:false, clickedIndex:100,//点击对应的颜色 } }, methods: { oneLeverenter:function(index){ this.clickedIndex=index; }, oneLeverleave:function(index){ this.clickedIndex=100; }, twoLeverenter:function(index){ this.clickedIndex=index; }, twoLeverclick:function(index){ if (index==2){ this.oneLeverMenuClicked=!this.oneLeverMenuClicked; this.clickedIndex=index; }; if (index==3){ this.twoLeverMenuClicked=!this.twoLeverMenuClicked; this.clickedIndex=index; }; } } }; </script> <style> .left-titles{ height:70px; line-height:70px; text-align:center; font-size:18px; color:#171f2a; } .expense-left{ background: #f1f1f1; } .order-con{ text-align:left; line-height:40px; font-size:14px; color:#171f2a; } .default-color{ width:80px; color:#171f2a; background: #f1f1f1; overflow:hidden; word-break: keep-all; text-overflow: ellipsis; } .click-color{ color:#42aeec; background:rgb(52, 51, 59); overflow:visible; word-break: keep-all; text-overflow:clip; } .order-child{ width:160px; font-size:12px; line-height:40px; text-align:left; color:#666; } </style>