马克

男娘i 2022-12-11 13:43 118阅读 0赞

`position:sticky `[https://www.cnblogs.com/coco1s/p/6402723.html][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][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][https_www.jianshu.com_p_623c8b009a85]

动态组件

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

用`this.$parent`访问父组件

less变量 @ 混合 全局变量

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

--------------------

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>

祖父组件

渲染：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

[https_www.cnblogs.com_coco1s_p_6402723.html]: https://www.cnblogs.com/coco1s/p/6402723.html
[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]: 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
[https_www.jianshu.com_p_623c8b009a85]: https://www.jianshu.com/p/623c8b009a85
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20221123/08a706c3d8434a94b5ffaad662e88b86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20221123/33daab9b3a134772a0e83d02f4a5d2c8.png