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

发布于
2024-06-08 山东

更新于
2024-06-08

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

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

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

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

尝试部分:

搜索框
- 聚焦的时候弹出历史记录
  - 这里承载历史记录的元素的长度应该和输入框的长度是一样的，但是使用现成的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>

创作者中心
- 这里使用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>

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

前端 vue.js element-plus

阅读 1k

1 个回答

ABS_Plastic

发布于
2024-06-09 山西

实现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界面。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题