页面小组件-搜索栏(一)

样例展示
  • 效果示例-折叠状态
  • 效果示例-展开状态
  • 代码示例
html 复制代码
<custom-search-wrapper>
	<!--showFoldBtn 需要展示折叠按钮时传值-->
  <template slot='left'>
    <el-form
      :model="searchFormData"
      inline
      size="small"
      >
      <el-form-item>
        <el-input
          clearable
          v-model="searchFormData.employeePhone"
          placeholder="请输入职工电话"
          />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchFormData.employeeSource"
          placeholder="请选择职工来源"
          >
          <el-option
            v-for="item in employeeSourceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </template>
  <template slot="right">
    <div>
      <el-button
        type="primary"
        @click="handleSearchList"
        icon="el-icon-search"
        >查询
      </el-button>
      <el-button
        icon="el-icon-refresh-right"
        @click="handleResetSearchForm"
        >重置
      </el-button>
    </div>
  </template>
</custom-search-wrapper>
组件源码
html 复制代码
<template>
  <div class="search-wrapper">
    <!-- 左侧插槽:搜索表单 -->
    <div :class="['search-left', toggleFoldSearchWrapper ? 'fold-height' : '']">
      <slot name="left" />
    </div>
    <!-- 右侧扩展:查询、重置以及展开/收起 -->
    <div class="search-right">
      <slot name="right" />
      <!-- 展开/收起 -->
      <div
        v-if="showFoldBtn"
        class="fold-btn"
        @click="handleToggleSearch"
      >
        <span class="fold-text">{{ toggleFoldSearchWrapper ? '展开' : '收起' }}</span>
        <span class="fold-icon">
          <i :class="toggleFoldSearchWrapper ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'searchWrapper',
  props: {
    // 是否展示折叠按钮
    showFoldBtn: { type: Boolean, default: false }
  },
  data () {
    return {
      toggleFoldSearchWrapper: true
    }
  },
  methods: {
    // 展开/收起
    handleToggleSearch () {
      this.toggleFoldSearchWrapper = !this.toggleFoldSearchWrapper
    }
  }
}
</script>
<style lang="scss" scoped>
.search-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .search-left {
    flex: 1;

    &.fold-height {
      height: 50px; // 项目中使用的表单单行高度
      overflow: hidden;
    }
  }

  .search-right {
    display: flex;

    .fold-btn {
      display: flex;
      line-height: 30px;
      margin-left: 10px;
      cursor: pointer;

      .fold-text {
        width: 70px;
        font-size: 16px;
        font-weight: 400;
        color: #2796d4;
      }
    }
  }
}
</style>
组件说明

此为初版搜索栏组件,与表单并无太大关系,所以我起的组件名字是 searchWrapper------搜索栏容器。起因是有一天UI突然要统一项目样式风格,要求搜索栏区域内容较多时可以折叠/展开。正常来说是没有毛病的,但是对于当时的项目就很有毛病。(火气要上来...)

项目主体是由我主要参与魔改的Vue-Admin(Vue + ElementUI),项目里通过iframe+auth2.0认证嵌入了几个项目模块:一部分是Vue+View Design,一部分是React+Antd。但是,UI指着一个Antd的示例项目给我看:你就照着这个样子改!!!

大哥,抛开样式风格不一样不说,真要是改了的话,那得动多少页面!!!奈何身为基层打工人,屋里抗拒,只能微笑答应,转身自己心里爆炸。

当然,最终也没有完全按照他的意思改。由于其他项目的紧急插队,暂时就这样子先处理。

后续的项目经历中,根据需求的不断变化,搜索栏组件有了其他的封装类型,甚至与本文完全不同,以后慢慢更新

相关推荐
前端小趴菜051 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.3 小时前
serviceWorker缓存资源
前端
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子5 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...6 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts