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

样例展示

效果示例-折叠状态
效果示例-展开状态
代码示例

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的示例项目给我看：你就照着这个样子改！！！

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

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

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