VUE Node模式下，如何改变菜单的颜色，如何将超长文字缩略显示，在鼠标进入后展开全部显示，鼠标移出则恢复缩略显示...

VUE Node模式下，如何改变菜单的颜色，如何将超长文字缩略显示，在鼠标进入后展开全部显示，鼠标移出则恢复缩略显示：

1. “事件”引起变量值的变化，系统引擎自动根据变量值的变化刷新页面
2. 在VUE Node模式下设置变量、使用变量；
3. 在VUE Node模式下使用鼠标移入移出点击事件；
4. 在VUE Node模式下通过改变Class改变颜色、文字缩略等；

具体实现注意事项：

1. 在VUE Node模式下通过改变Class改变颜色、文字缩略等
   • 改变元素的显示要素（颜色、缩略、大小、背景等等）可以通过更改元素对应的Class实现；
   • class="clickedIndex==0?'click-color':'default-color'"
2. 在VUE Node模式下设置变量、使用变量
   • 变量不需要通过VAR等事先声明；
   • 变量需要在data中return;
   •  　　   

     data() {

             return {

                 oneLeverMenuClicked:false,

                 twoLeverMenuClicked:false,

                 clickedIndex:100,

                 }

         }
3. 在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>

 

转载于:https://www.cnblogs.com/li9club/p/11521687.html