首页 > 其他 > 详细

Vue笔记

时间:2019-04-16 00:07:47      阅读:138      评论:0      收藏:0      [点我收藏+]

1. 处理类 :  先给class加v-bind绑定  =>  :class ,  然后再三元表达式 :class = "[‘mui--control-item‘,item.id == 0 ? ‘ mui-active‘ : ‘ ‘ ]"

2. 处理路由高亮 

  

  •  : MUI库中默认的高亮是 ‘ mui-acrive‘,  (推荐)

路由配置的第二个参数 技术分享图片  用这个去覆盖默认高亮类 router-link-active

 


 

 

  •  把router-link-active 的样式改了  技术分享图片  (不推荐 因为要设置样式表 还要考虑优先级 很麻烦)

3. 视图切换样式  (包住路由的区域,因为只有路由在切换的时候才需要改造样式,其他都是固定的)

 

 1 .v-enter {
 2         opacity: 0;
 3         transform: translateX(100%);
 4     }
 5 
 6     .v-leave-to {
 7         opacity: 0;
 8         transform: translateX(-100%);
 9         position: absolute;
10     }
11 
12     .v-enter-active,
13     .v-leave-active {
14         transition: all 0.5s ease;
15     }

<transition>
<router-view></router-view>
</transition>

 

 

4. 阻止页面切换时出现滑动条

1   .app-container {
2         overflow-x: hidden;
3     }

5.

 

Vue笔记

原文:https://www.cnblogs.com/it-Ren/p/10714145.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!