组件逻辑系列—Note便利贴组件（第一版）

便利贴组件(Note)

第一版 4月25日 14:57

组件逻辑

代码

<template>
  <ul class="note-container">
    <li v-for = "item in data" :key="item.id">
      <a :href="item.href">
        <div class="icon">
          <Icon :type="item.type" />
        </div>
        <span>{{item.text}}</span>
      </a>
      <div v-if="item.ispop"  class="pop">
        <img
          :src="item.img?item.img:''"
          alt=""
        />
      </div>
    </li>
  </ul>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  props:{
    data:{
      type:Object,
      required:true,
    }
  },
  components: {
    Icon,
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.note-container {
  list-style: none;
  padding: 20px;
  margin: 0;
  color: @gray;
  @itemHeight: 30px;
  li {
    height: @itemHeight;
    line-height: 30px;
    margin: 14px 0;
    position: relative;
    &:hover {
      .pop {
        transform: scaleY(1);
      }
    }
  }
  a {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .icon {
    font-size: 26px;
    width: 36px;
    &.weixin {
      font-size: 32px;
      text-indent: -3px;
    }
  }
  .pop {
    position: absolute;
    left: 0;
    bottom: @itemHeight + 5px;
    padding: 10px 15px;
    background: #fff;
    border-radius: 5px;
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: 0.3s;
    img {
      width: 150px;
      height: 150px;
    }
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: #fff;
      bottom: -4px;
    }
  }
}
</style>

细节

@itemHeight: 30px;

内部声明变量

复习transform

transform: scaleY(1);

transform: scaleY(0);

transform-origin: center bottom;

transition: 0.3s;

transform: translateX(-50%) rotate(45deg);

1. transform

• 注意：

只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

• 变量

rotate()：定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如 transform-origin 属性所指定) 。 移动量由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针 。 180°的旋转称为点反射 (point reflection)。

scale()：可改变元素的大小。 它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。矢量的坐标可定义在每个不同方向上各子完成一定比例缩放。

skew()：用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。

translate()：移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。

2. transition

• 定义

添加动画过渡

• 语法

transition: <property> <duration> <timing-function> <delay>;

transition:过渡属性 过渡时间 过渡曲线 延迟触发

transition-property过渡属性，哪些属性进行过渡处理

transition-duration过渡时间，开始到结束过渡的时间

transition-timing-function过渡曲线，ease平滑，linear线性，step-end一步到位，steps(4, end)分四帧到结束

transition-delay延迟触发，多少时间后触发