前端 - 如何活用element-plus这一类组件库?

Question

如何活用element-plus这一类组件库?

如何尽可能多的使用element-plus中的组件实现掘金首页的Header部分呢?

我自己尝试实现，但是没有完成。我觉得使用这些组件库可以直接使用一些现成的东西，是很方便的，但是也套上了一个很重的枷锁，你需要修改很多东西去实现你的设计，可能比你自己写花费的时间精力要更大。

到底可不可以用element-plus的组件来实现，我也不确定。它可能可以实现，但是我能力不够，不能实现它。你可以给出你的实现吗?

尝试部分:

1. 搜索框

   • 聚焦的时候弹出历史记录

     • 这里承载历史记录的元素的长度应该和输入框的长度是一样的，但是使用现成的dropdown很难实现这一点。因为这个pop元素是在dropdown元素之外的。

   • 在输入框末尾有搜索图标

     • 只需要在el-input上设置:suffix-icon="Search"并导入Search图标即可，这是使用element-plus带来的一大好处，但是我们还需要再设置图标所在容器的样式（这好像也不容易）。

Search playground

<script setup lang="ts">import { ref, version as vueVersion, onMounted } from 'vue'import { version as elVersion } from 'element-plus'import { ElementPlus, Search } from '@element-plus/icons-vue'const search = ref("");</script><template>  <el-dropdown trigger="click">    <el-form>      <el-form-item class="mb-0">        <el-input placeholder="搜索" v-model="search" :suffix-icon="Search"></el-input>      </el-form-item>    </el-form>    <template #dropdown>      <el-dropdown-menu>        <el-dropdown-item>          你好        </el-dropdown-item>        <el-dropdown-item>          你好        </el-dropdown-item>      </el-dropdown-menu>    </template>  </el-dropdown></template>  <style scoped>  .mb-0 {    margin-bottom: 0;  }</style>

2. 创作者中心

   • 这里使用dropdown组件还是非常合适的
   • 弹出元素使用哪些组件来设计就比较纠结了?

   

布局使用el-row、el-col、space?
上半部分的可点击元素使用buttonorlink?

这一部分也是用el-row、el-col来布局？但是此时我们会发现查看更多这几个字并没有向右对齐。因为它占据的大小(:span=""8)要比这几个字更大。所以我们还需要加上flex justify-end类名。

<el-row>    <el-col :span="8">创作灵感</el-col>    <el-col :span="8">查看更多</el-col></el-row>

这里真的有必要使用el-row、el-col吗？我看没有必要，简单的事情搞复杂了。直接按下面这样写就好了

<div class="flex justify-between">    ...    ...</div>

在都是使用element-plus的代码中出现了一个不是element-plus组件完成的部件，感觉有点不太美好。在Ant Design中有Flex组件，在element-plus应该没有类似功能。
CreatorCenter playground

// App.vue<script setup lang="ts">import { ref, version as vueVersion, onMounted } from 'vue'import { version as elVersion } from 'element-plus'import { ElementPlus, Document, HotWater, Notebook, Printer,Box, ArrowRight } from '@element-plus/icons-vue'import PopCard from "./PopCard.vue"</script><template>  <el-dropdown split-button type="primary" class="scaling-animation">    创作者中心    <template #dropdown>      <PopCard />    </template>  </el-dropdown></template><style scoped></style>

// PopCard.vue<script setup lang="ts">import { ref, version as vueVersion, onMounted } from 'vue'import { version as elVersion } from 'element-plus'import { ElementPlus, Document, HotWater, Notebook, Printer,Box, ArrowRight } from '@element-plus/icons-vue'</script><template>  <el-card class="my-card">    <el-row class="row-gap-sm mb-sm">      <el-col :span="6" class="my-col">        <el-link href="/">          <el-space direction="vertical">            <el-icon><Document /></el-icon>            <el-text type="info">写文章</el-text>          </el-space>        </el-link>      </el-col>      <el-col :span="6" class="my-col">        <el-link href="/">          <el-space direction="vertical">            <el-icon><HotWater /></el-icon>            <el-text type="info">写沸点</el-text>          </el-space>        </el-link>      </el-col>      <el-col :span="6" class="my-col">        <el-link href="/">          <el-space direction="vertical">            <el-icon><Notebook /></el-icon>            <el-text type="info">发笔记</el-text>          </el-space>        </el-link>      </el-col>      <el-col :span="6" class="my-col">        <el-link href="/">          <el-space direction="vertical">            <el-icon><Printer /></el-icon>            <el-text type="info">写代码</el-text>          </el-space>        </el-link>      </el-col>      <el-col :span="6" class="my-col">        <el-link href="/">          <el-space direction="vertical">            <el-icon><Box /></el-icon>            <el-text type="info">草稿箱</el-text>          </el-space>        </el-link>      </el-col>    </el-row>        <el-divider></el-divider>        <el-row justify="space-between" class="mb-sm">      <el-col :span="8">          <el-text>            创作灵感          </el-text>      </el-col>      <el-col :span="8" class="flex justify-end">        <el-link href="/">          <el-text>            查看更多          </el-text>          <el-icon><ArrowRight /></el-icon>        </el-link>      </el-col>    </el-row>    <el-row class="mb-sm">      <el-col>        <el-space>          <el-tag type="primary" disable-transitions>            话题          </el-tag>          <el-link href="/">            <el-text>#稀土开发者大会2024</el-text>          </el-link>        </el-space>      </el-col>    </el-row>    <el-row class="mb-sm">      <el-col>          <el-space>            <el-tag type="primary" disable-transitions>            话题          </el-tag>          <el-link href="/">            <el-text>#每天一个知识点</el-text>          </el-link>        </el-space>      </el-col>    </el-row>    <el-row>      <el-col>        <el-space>          <el-tag type="primary" disable-transitions>            话题          </el-tag>          <el-link href="/">            <el-text>#每日快讯</el-text>          </el-link>        </el-space>              </el-col>    </el-row>  </el-card></template><style scoped>  .flex {    display: flex;  }  .justify-end {    justify-content: end;  }  .my-form .el-form-item{    margin-bottom: 0;  }  .my-card {    width: 400px;  }  .my-row {    row-gap: 10px;  }  .row-gap-sm {    row-gap: 10px;  }  .my-col {    display: grid;    place-content: center;  }  .py-sm {    padding-block: 10px;  }  .mb-sm {    margin-bottom: 10px;  }</style>

3. 动画

   • 最难的部分应该就是这个了
   • 我在另一个问题如何使用 Vue 和 Element-Plus 实现输入框聚焦时下拉按钮消失动画效果？得到一个回答，挺好的，但是
   • 和掘金上的动画效果还是有差别的，该回答使用了translate移动创作者中心按钮，opacity控制它慢慢消失，而掘金上的动画效果是慢慢变窄消失，右侧位置不同。
   • 感觉耦合比较低。
4. 整个Header
   用Menu组件来包裹吗?
   把Search组件放到<el-menu-item>中，当我们点击的时候会报错?Invalid event arguments: event validation failed for event "click".

Answer 1

实现Header部分的步骤

1. 创建基础布局

首先，我们需要构建Header的基础布局，包括一个搜索框和一个包含下拉菜单的按钮。

<template>  <el-header>    <el-row class="header-container">      <el-col :span="16">        <!-- 搜索框 -->        <el-dropdown trigger="click">          <el-form>            <el-form-item class="mb-0">              <el-input placeholder="搜索" v-model="search" :suffix-icon="SearchIcon"></el-input>            </el-form-item>          </el-form>          <template #dropdown>            <el-dropdown-menu>              <el-dropdown-item>历史记录1</el-dropdown-item>              <el-dropdown-item>历史记录2</el-dropdown-item>            </el-dropdown-menu>          </template>        </el-dropdown>      </el-col>      <el-col :span="8" class="flex justify-end">        <!-- 创作者中心按钮 -->        <el-dropdown split-button type="primary">          创作者中心          <template #dropdown>            <PopCard />          </template>        </el-dropdown>      </el-col>    </el-row>  </el-header></template><script setup>import { ref } from 'vue';import { Search } from '@element-plus/icons-vue';import PopCard from './PopCard.vue';const search = ref("");const SearchIcon = Search;</script><style scoped>.header-container {  padding: 10px 20px;}.flex {  display: flex;}.justify-end {  justify-content: flex-end;}.mb-0 {  margin-bottom: 0;}</style>

2. 实现PopCard组件

PopCard组件是一个自定义组件，展示下拉菜单的内容。

<!-- PopCard.vue --><template>  <el-card>    <el-row class="mb-sm">      <el-col :span="6">        <el-link href="/">          <el-space direction="vertical">            <el-icon><Document /></el-icon>            <el-text type="info">写文章</el-text>          </el-space>        </el-link>      </el-col>      <!-- 其他列同样定义 -->    </el-row>    <el-divider></el-divider>    <el-row justify="space-between" class="mb-sm">      <el-col :span="8">        <el-text>创作灵感</el-text>      </el-col>      <el-col :span="8" class="flex justify-end">        <el-link href="/">          <el-text>查看更多</el-text>          <el-icon><ArrowRight /></el-icon>        </el-link>      </el-col>    </el-row>    <!-- 话题部分 -->    <el-row class="mb-sm">      <el-col>        <el-space>          <el-tag type="primary">话题</el-tag>          <el-link href="/">            <el-text>#稀土开发者大会2024</el-text>          </el-link>        </el-space>      </el-col>    </el-row>  </el-card></template><script setup>import { Document, ArrowRight } from '@element-plus/icons-vue';</script><style scoped>.mb-sm {  margin-bottom: 10px;}.flex {  display: flex;}.justify-end {  justify-content: flex-end;}</style>

3. 处理动画效果

动画效果是实现UI流畅性的重要部分。对于输入框聚焦时下拉按钮消失的动画，可以使用CSS3的transition属性。

/* 在您的style scoped块中添加以下样式 */.input-wrapper {  position: relative;}.input-wrapper input:focus + .dropdown {  opacity: 1;  transform: translateY(0);}.dropdown {  position: absolute;  top: 100%;  left: 0;  opacity: 0;  transform: translateY(-10px);  transition: opacity 0.3s, transform 0.3s;}

在您的组件中应用这些样式：

<template>  <div class="input-wrapper">    <el-input placeholder="搜索" v-model="search" :suffix-icon="SearchIcon"></el-input>    <div class="dropdown">      <el-dropdown-menu>        <el-dropdown-item>历史记录1</el-dropdown-item>        <el-dropdown-item>历史记录2</el-dropdown-item>      </el-dropdown-menu>    </div>  </div></template>

建议结合Element Plus的组件，如el-input、el-dropdown、el-card和el-row等，快速构建一个复杂的UI界面。