Vue3——动态input边框效果实现

因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。

<template>
  <div>
    <div class="border">
      <van-field v-model="value" placeholder="请输入用户名" autocomplete="off" />
      <span class="bottom"></span>
      <span class="right"></span>
      <span class="top"></span>
      <span class="left"></span>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted, reactive } from "vue";
const value = ref("");
</script>
<style scoped lang='less'>
.border {
  width: 325px;
  position: relative;
}
.border:hover .bottom {
  transform: scaleX(1);
  transform-origin: left center;
}
.border:hover .top {
  transform: scaleX(1);
  transform-origin: right center;
}
.border:hover .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}
.border:hover .left {
  transform: scaleY(1);
  transform-origin: top center;
}
span {
  display: block;
}
.bottom,
.top,
.left,
.right {
  position: absolute;
  background: linear-gradient(to right, #8f41e9, #578aef);
  transition: transform 0.1s ease-in-out;
}
.bottom,
.top {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
}

.left,
.right {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
}
.bottom {
  bottom: 0;
  transform-origin: right center;
}
.top {
  top: 0;
  transform-origin: left center;
  transition-delay: 0.2s;
}
.right {
  transform-origin: top center;
  right: 0;
  transition-delay: 0.1s;
}
.left {
  left: 0;
  transform-origin: bottom center;
  transition-delay: 0.3s;
}
</style>

最后看一下实现效果：