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>

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

  1. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  2. 详解Vue 开发模式下跨域问题

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

  3. vue history模式下的微信分享

    // 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...

  4. vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

  5. vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

    微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...

  6. vue开发小结(下)

    前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...

  7. ASM:《X86汇编语言-从实模式到保护模式》越计卷:实模式下对DMA和Sound Blaster声卡的控制

    说实话越计卷作者用了16页(我还是删过的),来讲怎么控制声卡,其实真正归纳起来就那么几点. ★PART1:直接存储访问 1. 总线控制设备(bus master) 在硬件技术不发达的早期,处理器是最重 ...

  8. Apache Spark技术实战之8:Standalone部署模式下的临时文件清理

    未经本人同意严禁转载,徽沪一郎. 概要 在Standalone部署模式下,Spark运行过程中会创建哪些临时性目录及文件,这些临时目录和文件又是在什么时候被清理,本文将就这些问题做深入细致的解答. 从 ...

  9. Apache Spark技术实战之6 --Standalone部署模式下的临时文件清理

    问题导读 1.在Standalone部署模式下,Spark运行过程中会创建哪些临时性目录及文件? 2.在Standalone部署模式下分为几种模式? 3.在client模式和cluster模式下有什么 ...

随机推荐

  1. Selenium+java - 截图操作

    写在前面 自动化测试过程中,运行失败截图可以很好的帮我们定位问题,因此,截图操作也是我们自动化测试中的一个重要环节. 截图方法 1.通过截图类TakeScreenshout实现截图 特点:截取浏览器窗 ...

  2. node获取本机动态IP,并对应修改相关JavaScript文件的IP地址

    目录 由于本机是自动获取分配的动态IP,所以每次重启后需要重新更改与IP相关文件 参考 时间:2018-08-02,更新时间:2018-11-06 注意:在win10环境运行无问题 由于本机是自动获取 ...

  3. ABAP-复制采购订单行项目到新的行

    FUNCTION zmm_fm_copy2new. *"------------------------------------------------------------------- ...

  4. 阿里云短信服务(JAVA)

    一,前言 ​ 短信验证码想必大家都不陌生,在很多网站,APP中都有使用到.比如登录,注册,身份校验等场景.不过通常情况下,短信服务都是外包给第三方公司的,接下来向大家分享如何使用阿里的短信服务. 二, ...

  5. 如何让textarea placeholder 文字垂直居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Golang 解决 Iris 被墙的依赖包

    使用 Golang 的 Iris web 框架时,用 go get github.com/kataras/iris 命令久久无法下载,最后还报一堆错误. 使用  GOPROXY 可解决问题,也可参考如 ...

  7. ATX agent+UIautomation2 自动化测试介绍

    纯搬运贴,内容几乎来源于作者的几篇介绍文章,这里做了整合 目前ATX+UIautomator2 处于自动化界的浪口风尖,现在有幸终于有时间对ATX进行了粗浅的了解 为什么要用ATX ATX+UIaut ...

  8. 数据仓库系列之ETL过程和ETL工具

    上周因为在处理很多数据源集成的事情一直没有更新系列文章,在这周后开始规律更新.在维度建模中我们已经了解数据仓库中的维度建模方法以及基本要素,在这篇文章中我们将学习了解数据仓库的ETL过程以及实用的ET ...

  9. Oracle 12c Adoption Discussion — Summary

    Morning (@9:30) Oracle 12c Overview & Features for Developers Oracle Database In-Memory Deep Div ...

  10. 一文了解Python常见的序列化操作

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...