【前端】50个项目ExpandingCards#1

前言

才发现github上有个50projects50days的项目，感觉还挺有趣的，可以练手学习，增加点代码练习，巩固下基础知识。
计划用vue2改写15个项目，vue3+js改写15个项目，vue3+ts改写20个项目。
在此仅作个人记录，权当打卡and水文章了hh

实现

第一个项目，ExpandingCards，基于vue2实现
（简单的学习笔记在代码中）

完整代码如下：

<template>
  <div class="container">
    <!-- 1 可以用(item,index)的方式，但是不能用in，要用of -->
    <div v-for="(item,index) of cardsList" ref="cardsList" :key="index" :style="item.picture" class="panel" @click="expandHandler(index)">
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ExpandingCards',
  components: {

  },
  data() {
    return {
      cardsList: [
        {
          title:"Explore The World",
          picture:"background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
        },
        {
          title:"Wild Forest",
          picture:"background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
        },
        {
          title:"Sunny Beach",
          picture:"background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')"
        },
        {
          title:"City on Winter",
          picture:"background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"
        },
        {
          title:"Mountains - Clouds",
          picture:"background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"
        }
      ]
    }
  },
  methods: {
    /**
     * 2 其实，换一种思路，不依赖class的挂载与删除，而是先全部挂上class，然后再对class进行激活的方式实现
     * 可以参考: https://blog.csdn.net/qq_36509946/article/details/119998632
     */

    expandHandler(index){
      this.removeActiveClasses()
      // 3 用refs获取到v-for中的元素（vue2）
      // 4 通过dom的classList实现样式的add和remove
      this.$refs.cardsList[index].classList.add('active')
    },

    removeActiveClasses(){
      this.$refs.cardsList.forEach(panel=>{
        panel.classList.remove('active')
      })
    }


  },
  mounted(){
    // 4 初始样式添加
    this.$refs.cardsList[0].classList.add('active')
  }


}

</script>

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  /* 6 边框、内边距的值，包含在width内 */
  box-sizing: border-box; 
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  width: 90vw
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  /* -webkit-transition: all 700ms ease-in; */
  transition: all 700ms ease-in;
}

.panel h3{
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  /* 透明 */
  opacity: 0;
}


/* 7 复合的样式选择 */
.panel.active {
  flex: 5;
}



.panel.active h3{
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px){
  .container {
    width: 100vw;
  }

  /* 8 当宽度过小时，隐藏末尾元素 */
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

</style>