Web项目知识点积累

1. vue3.0 子组件向父组件传递事件

需求：子组件有个点击事件，需要将该点击事件传递给父组件

// son.vue
<template>
  <button @click='success'></button>
  <button @click='fail'></button>
</template>

<script setup>
  const emit = defineEmits(['clickBtnAction','clickBtnAction2'])
  function success() {
    emit('clickBtnAction', true)
  }
  function fail() {
    emit('clickBtnAction2')
  }
</script>

// father.vue
<template>
  <son @clickBtnAction="clickBtnFunction" @clickBtnAction2="clickBtnFunction2"></son>
</template>

<script setup lang="ts">
  function clickBtnFunction(canShow:Boolean){
    if(canShow){
        // code
    }
  }
  
  function clickBtnFunction(){
    //code
  }
</script>

2.image的object-fit属性详解

object-fit属性测试
下面我们来测试一下每一个属性值显示的效果每个img标签都设置的 width:200px 和 width:200px，再加上设置的object-fit属性的不同值，效果图如下：

3.让3个盒子垂直居中排布

效果图：

<template>
   <div class="father">
     <div class="son son1">
        <img :src="staticImg('company-wechat.png')" alt="">
     </div>
     <div class="son son2">请扫描二维码</div>
     <div class="son son3">关注我们的微信公众号</div>
  </div>
</template>

<style scoped lang="less">
.father {
    margin: 0px;
    width: 300px;
    height: 250px;
    align-items: center;
    .son{
        width: 100%;
    }
    .son1{
        height: 70%;
        display: flex;
        justify-content: center;
        img{
            text-align: center;
            width: 94px;
            height: 94px;
        }
    }
    .son2{
        text-align: center;
        height: 15%;
    }
    .son3{
        text-align: center;
        height: 15%;
    }
}
</style>

4. 实现如下效果：

• 左边是图片，右边是文字，并且左右两边平分,居中
• 圆角
• 四周有阴影

<div class="m-time-content">
   <div class="quarter-div blue">
        <img id="time-content-img" src="../assets/logo.png" alt="">
   </div>
   <div class="quarter-div green">
     公司于2019.01在广州市成立
   </div>
</div>

<style>
.m-time-content {
  height: 150px;
  margin-left: 0px;
  overflow: hidden;
  // 边框+阴影
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(200, 200, 200);
  .quarter-div {
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .green {
    color: #000;
    font-size: larger;
  }
}

#time-content-img {
  width: 100%;
  height: 100%;
}
</style>

注意点：

1. 设置四周阴影，可以设置：水平方向 0px 垂直方向0px
   box-shadow: 0px 0px 10px rgb(200, 200, 200);
2. 为了防止圆角被子元素覆盖，可以在父元素上设置：
   overflow: hidden;
3. 如果想让2个子元素水平平分父元素，可以设置：
   {
   width: 50%; // 宽度各占一半
   height: 100%; // 高度铺满
   float: left;
   display: flex; // 采用flex布局
   align-items: center;
   justify-content: center;
   }

5. CSS中rem、em、vh、px各自代表的含义

• rem：是全部的长度都相对于根元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

• em： 子元素字体大小的em是相对于父元素字体大小,元素的width/height/padding/margin用em的话是相对于该元素的font-size

• vh:全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

• px: px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
  一般电脑的分辨率有{1920 * 1024}等不同的分辨率
  1920 * 1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素