vue组件库开发日志|青训营笔记

这是我参加青训营笔记创作活动的第15天

为了解决 横竖的css冲突问题 因为弹出框 如果是static 那么竖导航可以正常使用 或者是 absolute 那么横导航可以正常使用

通过 provide inject 可以实现跨级传递数据 props 只能从父到子，通过跨级传递，那么就可以把，vertical属性传递 到深层subNav当中，控制 position 是 static 还是 absolute

<template>
  <div class="emui-sub-nav" :class="{ active }" v-click-outside="close">
    <span class="emui-sub-nav-label" @click="onClick">
      <slot name="title"></slot>
      <span class="emui-sub-nav-icon" :class="{ open }">
        <!-- <g-icon name="right"></g-icon> -->
      </span>
    </span>
    <div class="emui-sub-nav-popover" :class="{ vertical }" v-show="open">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ClickOutside from "./click-outside";
//  import GIcon from '../icon'
export default {
  // components: {GIcon},
  directives: { ClickOutside },
  name: "emui-sub-nav",
  inject: ["root"],

当css 的动画不足以实现的时候，可以使用JavaScript钩子来创建动画

可以在 attribute 中声明 JavaScript 钩子

<transition  
v-on:before-enter="beforeEnter"  
v-on:enter="enter"  
v-on:after-enter="afterEnter"  
v-on:enter-cancelled="enterCancelled"  
  
v-on:before-leave="beforeLeave"  
v-on:leave="leave"  
v-on:after-leave="afterLeave"  
v-on:leave-cancelled="leaveCancelled"  
>
</transition>

当想制作动画的时候， 我对 height属性进行了同时两次赋值

leave(el, done) {
  let { height } = el.getBoundingClientRect();
  el.style.height = `${height}px`;
  el.getBoundingClientRect();
  el.style.height = 0;
  el.addEventListener("transitionend", () => {
    //防止 done后直接关闭动画,所以结束后再关闭动画
    done();
  });
},

可是浏览器只会取最后一次height 所以不能达到0~120动画

在两句中间加上一些没用的语句就会让动画生效了

:not(类名) 可以直接选择没有这个类名的样式

  &:not(.vertical) {
    &.active {
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 2px solid $blue;
        width: 100%;
      }
    }
  }

nvm管理node.js

以后记住打开cmd 切换版本的时候要用 管理员身份运行 具体操作参考以下文章

参考文章

将nodejs的高版本降级为低版本（切换node版本） - 掘金 (juejin.cn)