马克

position:sticky https://www.cnblogs.com/coco1s/p/6402723.html  

 

相邻兄弟选择器 ~ + transform: translateX(290px); 实现Tab滑动效果

 

vue-路由切换 ，在路由跳转时添加过渡动画

【1. 在watch中监听路由切换，并根据切换路由的index大小设置动画样式

2. 用 <transition> 给<router-view> 组件添加过渡效果】

https://blog.csdn.net/qq_41725450/article/details/102948068?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

 

vue中的ref 

https://www.jianshu.com/p/623c8b009a85

 

动态组件

<!-- 失活的组件将会被缓存！-->

<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>

 

用this.$parent访问父组件

 

less变量 @ 混合 全局变量

---

webpack 开发环境 process.env.NODE_ENV 【配置webpack】

 

tabbar切换 不重复请求

v-slot的基本用法

子组件

<template>
  <div class="box">
    我是子组件1 
    <slot name="test"></slot>
    我是子组件2
    <slot name="heiheih"></slot>
    我是子组件3
  </div>
</template>

父组件1

<template>
  <drawerLayout>
    <template v-slot:test>
      <div>
        我是父组件1
      </div>
    </template>
  </drawerLayout>
</template>

父组件2

<template>
  <drawerLayout>
    <template v-slot:heiheih>
      <div>
        我是父组件2
      </div>
    </template>
  </drawerLayout>
</template>

祖父组件

<template>
  <div>
    <mainLayout />
    <h1>--------</h1>
    <customLayout />
  </div>
</template>

渲染：