【前端】50个项目HiddenSearchWidget#4

前言

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

实现

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

<template>
  <div class="body">
    
    <div class="search" ref="search">
      <input type="text" class="input" ref="input" placeholder="Search...">
      
      <button class="btn" @click="click">
        <i class="fas fa-search"></i>
      </button>
    </div>

  </div>
</template>
<script>
export default {
  name: 'HiddenSearchWidget',
  components: {

  },
  data() {
    return {

    }
  },
  methods: {
    click(){
      this.$refs.search.classList.toggle('active')
      this.$refs.input.focus()
    }
  }

}

</script>
  
<style scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css");
.body {
  box-sizing: border-box!important;
  /* 线性渐变，渐变轴 */
  background-image: linear-gradient(90deg,#7d5fff, #7158e2);
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  overflow: hidden;
  margin: 0;
}

.search {
  
  position: relative;
  height: 50px;
}

.search .input {
  background-color: #fff;
  border: 0;
  font-size: 18px;
  padding: 15px;
  height: 50px;
  width: 50px;
  /* 触发动画时内容 */
  transition: width 0.3s ease;
}

.btn {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top:0;
  left:0;
  height: 50px;
  width: 50px;
  /* 触发动画时内容 */
  transition: transform 0.3s ease;
}

.btn:focus,
.input:focus {
  /* 取消聚焦时的外边框 */
  outline: none;
}

.search.active .input {
  /* 动画的结束状态 */
  width: 200px;
}

.search.active .btn{
  /* 动画的结束状态 */
  transform: translateX(198px);
}
</style>
  

其他

补充资料，配色可以查看：
配色知识-掘金
uigradients