Vue复刻华为官网：如何制作搜索栏的焦点阴影效果和悬浮图标颜色变化

2023-04-10 06:16:17

复刻华为官网搜索栏：打造引人注目的交互式设计

搜索栏焦点阴影效果

华为官网的搜索栏在获取焦点时，周围会出现一个微妙的阴影效果。这为用户提供了一个视觉提示，让他们知道搜索栏处于激活状态，准备接受输入。要实现这一效果，我们可以使用Vue框架的@focus事件。当搜索栏获得焦点时，我们可以通过修改CSS类添加阴影样式。

悬浮图标颜色变化

在搜索栏右侧，还有一个图标。当鼠标悬停在该图标上时，它的颜色会发生变化。这为用户提供了一种交互式的体验，让他们知道可以点击该图标执行特定操作。要实现这一效果，我们可以使用两个SVG图标，并使用v-if指令来根据鼠标悬停状态控制图标的可见性。

代码示例

以下代码示例展示了如何使用Vue框架实现这两个效果：

<template>
  <div class="search-bar" @focus="handleFocus" @blur="handleBlur">
    <input type="text" placeholder="搜索">
    <svg v-if="isHovered" class="icon-hovered">...</svg>
    <svg v-else class="icon-default">...</svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    };
  },
  methods: {
    handleFocus() {
      this.$el.classList.add('focused');
    },
    handleBlur() {
      this.$el.classList.remove('focused');
    },
    handleMouseover() {
      this.isHovered = true;
    },
    handleMouseleave() {
      this.isHovered = false;
    }
  }
}
</script>

<style>
.search-bar {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  transition: box-shadow 0.2s ease-in-out;
}

.search-bar.focused {
  box-shadow: 0 0 5px #ccc;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-hovered, .icon-default {
  width: 24px;
  height: 24px;
  fill: #ccc;
}

.icon-hovered {
  fill: #000;
}
</style>