3. 首页开发

地址栏文字超出显示三个点

.address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

scss技巧

scss变量都放在helpers.scss文件中

$content-font-color: #333;

将 ellipsis 封装成 scss 的 placeholder

%ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用

@import './style/helpers.scss';
.address {
  @extend %ellipsis;
}

也可以封装成 mixin

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用

.address {
  @include ellipsis;
}

placeholder 和 mixin 的区别

The difference between mixins and placeholders is that placeholders consolidates mutually-shared code, whereas mixins just assign the properties to the individual classes — along with whatever was specific to that class. Because of this, it’s preferential to use placeholders when possible, and it’s not always possible. As mentioned earlier, placeholders aren’t able to take parameters, making them less useful when code is dependent upon variables. It’s better to use mixins in those cases.

搜索栏

input设置placeholder颜色

> input {
  background: none;
  border: none;
  height: 100%;
  outline: none;
  &::placeholder {
    color: $grey-font;
  }
}

deep伪类

在vue中，style加上scoped，则只会作用在当前组件的元素上，如果要作用在其他组件内部，需要使用deep伪类

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

banner

解决图片加载时抖动问题：让父元素先占据图片需要的位置，这样它后面的元素就不会跳动

    .banner {
      margin-top: 12px;
      height: 0;
      overflow: hidden;
      padding-bottom: 86px;
      > img {
        width: 100%;
      }
    }

给图片设置 height 也可以

gap

父元素有左右padding, 要让这个gap占据100%的父元素宽度，只需左右margin设为负值

    .gap {
      height: 10px;
      background: #f1f1f1;
      margin: 0 -18px;
    }

name的作用

chrome安装vue devtools插件
vue devtools根据vue文件中的name属性读取组件名字，如果没有name, 则将vue文件名作为组件名

<script lang="ts">
  export default {
    name: 'Home',
  }
</script>

动态加载图片

在vue中如果图片的src绑定本地路径，wepback会直接解析为字符串，导致无法加载图片，需要使用require动态加载

// 无法加载
<div class="shop-img">
  <img :src="../assets/images/wowmall.png" alt="">
</div>

// 使用require动态加载
<div class="shop-img">
  <img :src="imgUrl" alt="">
</div>
<script>
  // ...
   const imgUrl = require('../assets/images/wowmall.png')
   // ...
</script>

让图片有圆角

方法一: 直接设置图片的 border-radius

.banner {
  padding: 0 18px;
  img {
    border-radius: 5px;
    width: 100%;
    height: 86px;
    object-fit: cover;
    object-position:center 25%;
  }
}

方法二: 将图片设置为 div 的 background

.banner {
  height: 86px;
  border-radius: 5px;
  background-image: url('https://s6.jpg.cm/2022/01/03/LtOxlW.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 18px;
}

父元素固定，子元素滚动

父元素设置 overflow: hidden;
子元素设置 overflow-y: scroll;

让图片覆盖父元素

.papa {
  width: 68px;
  height: 68px;
  background: red;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }