实现一个超有趣的 Material-UI 风格 Input 框

Sunshine_Lin
757 阅读3分钟

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

最近看到一个组件库叫做 Material-UI，它里面有一个 Input 框的效果非常有意思，效果如下

image.png

image.png

所以想自己实现一遍，并分享给大家~

基础组件代码

这个效果有两个动画点：

  • 1、提示文本移动到上分
  • 2、下方滑动条

提示文本可以使用绝对定位，将它移动到 input 的上方，并且要跟 input 的 placeholder水平一致

可以先设置 input 的 placeholder，然后慢慢调整 top 定位，直到水平对齐，再去掉 placeholder

至于滑动条，直接放置在容器底部即可~

image.png

现在可以得到基础的组件效果

image.png

动画效果

两个动画效果：

  • 1、提示文本移动到上分
  • 2、下方滑动条

image.png

这两个动画效果的触发时机都是：input 框聚焦的时候

所以需要监听 input 的聚焦事件，去触发动画效果，第一个动画效果改动的是top: 1px -> -30px、left: 5px -> 0px，第二个动画效果改动的是width: 0 -> 100%

所以我们需要给这两个节点样式先设置对应样式的 transition

image.png

设置好transition就要开始去触发动画效果了，需要监听 input 的聚焦事件

注意：失焦时需要恢复默认样式

image.png

现在就能达到我们想要的动画效果了~

image.png

检测 Input 的值

有一个小优化点就是，当 input 框有值的时候，提示文本不应该恢复原状，不然就会导致重叠效果，如下

image.png

只需要在失焦的时候判断拦截一下即可

image.png

最终效果 && 完整代码

image.png

<template>
    <label class="input-container">
      <div ref="label" class="label">Enter Your Username</div>
      <input class="input" v-model="value"  @focus="onFocus" @blur="onBlur"></input>
      <div class="line" ref="line"></div>
    </label>
  </template>
  
<script lang="ts" setup>
  import { ref } from 'vue'
  
  const value = ref('')
  const label = ref<HTMLDivElement | null>(null)
  const line = ref<HTMLDivElement | null>(null)
  const onFocus = () => {
      // 聚焦时，修改样式
      const labelEle = label.value
      const lineEle = line.value
      if (labelEle && lineEle)  {
          lineEle.style.width = '100%'
          labelEle.style.left = '0px'
          labelEle.style.top = '-30px'
         
      }
  }
  const onBlur = () => {
      // 如果有值，则不恢复
      if (value.value) return
      // 失焦时，恢复原装
      const labelEle = label.value
      const lineEle = line.value
      if (labelEle && lineEle)  {
          lineEle.style.width = '0px'
          labelEle.style.left = '5px'
          labelEle.style.top = '-4px'
          
      }
  }
</script>
  
<style lang="less" scoped>
  .input-container {
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid black;
    .input {
      font-size: 16px;
      padding: 5px;
      width: 100%;
    }
    .label {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 1px;
      user-select: none;
      font-weight: 500;
    }
    .line {
      height: 3px;
      width: 0;
      background-color: black;
    }
  }
</style>

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
  • 一个偏前端的全干工程师；
  • 一个不正经的掘金作者；
  • 一个逗比的B站up主；
  • 一个不帅的小红书博主；
  • 一个喜欢打铁的篮球菜鸟；
  • 一个喜欢历史的乏味少年；
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

avatar
文章
阅读
粉丝