1.搜索条件的组件，带滚动条，可隐藏

划空破云烟

于 2023-01-12 14:01:03 发布

阅读量275

点赞数 2

文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.csdn.net/qq_45494569/article/details/128658409

版权

一、vue 弹窗的搜索条件组件 (带滚动条)

<!--
    *名称：弹窗的搜索条件组件 (带滚动条)
    *功能：methods
      1.点击搜索的方法：@search
      2.搜索条件 props : formItemList
-->

展示效果
在这里插入图片描述

二、代码

<template>
  <div class="searchBox" v-show="isShowSearch">
    <div class="dialog-search">
      <!-- inline 行内表单域 -->
      <el-form
        :inline="true"
        ref="ruleForm"
        :model="formInline"
        class="demo-form-inline"
      >
        <!-- 配置项的 label 名字 太长 ，进行截取，然后用tooltip进行展示某一个的全名 -->
        <el-form-item
          v-for="(item, index) in formItemList"
          :key="index"
          :label="
            item.label.length > 6 ? item.label.slice(0, 6) + '...' : item.label
          "
          label-width="100px"
        >
          <div class="icon-input">
            <!-- effect= light / dark -->
            <div class="slotIcon" slot="label">
              <el-tooltip effect="dark" :content="item.label" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </div>
            <div class="inputBox">
              <!-- 普通 input 框 -->
              <el-input
                v-if="item.type == 'input'"
                v-model.trim="formInline[item.param]"
                :size="getSize(item.param, item.type) || 'small'"
                placeholder="请输入"
              ></el-input>
              <!-- 数字输入框 -->
              <el-input
                v-if="item.type == 'inputNumber'"
                v-model="formInline[item.param]"
                type="number"
                placeholder="请输入数字"
                :min="getLimit(item.param, item.type, 'min') || ''"
                :max="getLimit(item.param, item.type, 'max') || ''"
                :maxlength="getMaxLength(item.param, item.type) || ''"
                :size="getSize(item.param, item.type) || 'small'"
                @change="handleChange(item)"
                @blur="handleBlur(item)"
              >
              </el-input>
              <!-- 文本输入框 -->
              <el-input
                v-if="item.type == 'inputText'"
                v-model="formInline[item.param]"
                type="text"
                placeholder="请输入文本"
                :maxlength="getMaxLength(item.param, item.type) || ''"
                :size="getSize(item.param, item.type) || 'small'"
                show-word-limit
              >
              </el-input>
              <!-- select 框 单选-->
              <el-select
                v-if="item.type == 'select'"
                :filterable="getFilterable(item.param, item.type) || false"
                v-model="formInline[item.param]"
                placeholder="请选择内容"
                clearable
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in item.selectOptions"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.value"
                ></el-option>
              </el-select>
              <!-- select 框 多选 -->
              <el-select
                v-if="item.type == 'selectMultiple'"
                v-model="formInline[item.param]"
                multiple
                collapse-tags
                placeholder="请选择内容"
                clearable
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in item.selectOptions"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.value"
                ></el-option>
              </el-select>
              <!-- 时间区间 -->
              <el-date-picker
                style="width: 257px;"
                v-if="item.type == 'daterange'"
                v-model="formInline[item.param]"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :size="getSize(item.param, item.type) || 'small'"
              >
              </el-date-picker>
              <!-- 单个日期 -->
              <el-date-picker
                v-if="item.type == 'date'"
                v-model="formInline[item.param]"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :size="getSize(item.param, item.type) || 'small'"
              >
              </el-date-picker>
              <!-- 获取行政区编码  -->
              <!-- style="width:300px;" -->
              <el-cascader
                v-if="item.type == 'cascader'"
                :options="options"
                :props="{
                  expandTrigger: 'hover',
                  checkStrictly: true,
                  emitPath: false,
                }"
                ref="elcascader"
                v-model="formInline[item.param]"
                popper-class="mypopperclass"
                @click.native="casclick"
                @change="cascaderChange"
                :size="getSize(item.param, item.type) || 'small'"
              ></el-cascader>
            </div>
          </div>
        </el-form-item>
        <!-- 可用于显示其他按钮 -->
        <slot></slot>
      </el-form>
      <div class="btn">
        <el-form-item>
          <el-button type="primary" plain size="mini" @click="onSubmit"
            >查询</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="resetForm('ruleForm')"
            >重置</el-button
          >
          <!-- <el-button type="warning" plain size="mini" @click="onClose"
            >关闭</el-button
          > -->
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchBox",
  props: {
    formItemList: {
      type: Array,
      default() {
        return [
          {
            label: "下拉框",
            type: "select",
            selectOptions: [{ name: 111, value: 111 }],
            param: "company",
            defaultSelect: "222", // 下拉框默认选中项
          },
          {
            label: "输入框",
            type: "input",
            param: "name",
          },
          {
            label: "下拉框",
            type: "select",
            selectOptions: [{ name: 222, value: 222 }],
            param: "company",
            defaultSelect: "222", // 下拉框默认选中项
          },
        ];
      },
    },
    // 是否显示 弹窗的搜索条件组件
    isShowSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    // 获取父组件传过来的 params
    let formInline = {};
    for (const obj of this.formItemList) {
      formInline[obj.param] = obj.defaultSelect || "";
    }
    return {
      formInline,
      selectedOptions: [],
    };
  },
  watch: {
    formItemList: {
      handler(newVal, oldVal) {
        for (const obj of this.formItemList) {
          if (obj.defaultSelect) {
            formInline[obj.param] = obj.defaultSelect;
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    onSubmit() {
      // console.log("submit!", this.formInline);
      this.$emit("search", this.formInline);
    },
    resetForm(formName) {
      // console.log("清空条件");
      this.$refs[formName].resetFields();
      let formInline = {};
      for (const obj of this.formItemList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
        formInline[obj.param] = ""; // 所有筛选条件清空
      }
      this.formInline = formInline;
    },
    // 关闭  高级查询
    onClose() {
      this.resetForm("ruleForm");
      this.$emit("isShowSearchFn");
    },
    // 获取输入框的最大长度
    getMaxLength(param, type) {
      let maxlength = this.formItemList.find(
        (item) => item.param === param && item.type === type
      ).maxlength;
      return maxlength;
    },
    // 获取 输入框的 最大位数 和最小位数
    getLimit(param, type, limitType) {
      let limit = "";
      if (limitType === "min") {
        limit = this.formItemList.find(
          (item) => item.param === param && item.type === type
        ).min;
      } else if (limitType === "max") {
        limit = this.formItemList.find(
          (item) => item.param === param && item.type === type
        ).max;
      }
      return limit;
    },
    // 获取 input的 大小 getSize、
    getSize(param, type) {
      let size = this.formItemList.find(
        (item) => item.param === param && item.type === type
      ).size;
      return size;
    },
    // 数字输入框 值改变的事件
    handleChange(item) {
      let value = this.formInline[item.param];
      if (item.min && value < Number(item.min)) {
        this.formInline[item.param] = item.min;
      } else if (item.max && value > Number(item.max)) {
        this.formInline[item.param] = item.max;
      } else {
        this.formInline[item.param] = value;
      }
    },
    // 数字输入框 失去焦点的事件
    handleBlur(item) {
      let value = this.formInline[item.param];
      if (item.min && value < Number(item.min)) {
        this.formInline[item.param] = item.min;
      } else if (item.max && value > Number(item.max)) {
        this.formInline[item.param] = item.max;
      } else {
        this.formInline[item.param] = value;
      }
    },
    // select 组件是否带搜索
    getFilterable(param, type) {
      let isfilterable = this.formItemList.find(
        (item) => item.param === param && item.type === type
      ).filterable;
      return isfilterable;
    },
  },
};
</script>

<style lang="less" scoped>
.searchBox {
  height: 230px;
  width: 100%;
  // width: calc(100% - 32px);
  box-sizing: border-box;
  background: #fefefe;
  // background: green;
  // margin-top: 45px;
  border: 1px solid #ececec;
  position: absolute;
  z-index: 999;
  // left: 10%;
  // right: 10%;
  padding: 20px 20px;
  // padding-bottom: 0;
  box-shadow: 0 7px 18px -12px #bdc0bb;
}
.dialog-search {
  margin: 0 1rem;
  text-align: left;
  // position: relative;
  // input 框 label的内边距
  .icon-input {
    display: flex;
  }
  /deep/ .el-form-item__label {
    padding: 0;
  }
  /deep/ .el-form-item__content {
    // width: 16rem;
    // 插槽里面的图标
    // border: 1px solid green;
    .slotIcon {
      // border: 1px solid green;
      margin-right: 0.3125rem /* 5px -> .3125rem */;
    }
    // input 框
    .el-input {
      width: 16rem;
    }
    // select 框
    .el-select {
      // border: 1px solid green;
      .el-input__inner {
        width: 16rem;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 1.875rem /* 30px -> 1.875rem */;
    // border: 1px solid red;
  }
  .mypopperclass .el-radio,
  .el-radio__inner,
  .el-radio__input {
    position: absolute;
    display: none;
  }
  .demo-form-inline {
    // border: 1px solid red;
    overflow: overlay;
    height: 150px;
    // 每一个 input 的距离
    /deep/ .el-form-item {
      margin-bottom: 10px;
      // border:1px solid red;
    }
    // // 不设置 按钮
    // &::-webkit-scrollbar {
    //   /*滚动条整体样式*/
    //   width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    //   height: 1px;
    // }
    // &::-webkit-scrollbar-thumb {
    //   /*滚动条里面小方块*/
    //   border-radius: 10px;
    //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //   background: #71d1f5;
    // }
    // &::-webkit-scrollbar-track {
    //   /*滚动条里面轨道*/
    //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //   border-radius: 10px;
    //   background: #ededed;
    // }

    /********* 按钮滚动条 ************/
    &::-webkit-scrollbar {
      width: 10px; /*对垂直流动条有效*/
      height: 10px; /*对水平流动条有效*/
      background-color: rgba(255, 255, 255, 0.6); // 滚动条背景色
    }

    // ::-webkit-scrollbar-track —— 轨道的 颜色、内阴影、圆角
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ededed;
    }

    // ::-webkit-scrollbar-thumb —— 滑块的 颜色、内阴影、圆角
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #3fc8f8;
      background: rgba(71, 145, 242, 0.5);
    }

    // ::-webkit-scrollbar-button —— 两端按钮样式，默认display: none;
    &::-webkit-scrollbar-button {
      background-color: #3fc8f8;
      background: rgba(71, 145, 242, 0.5);
      height: 8px;
      // display: none;
    }

    // ::-webkit-scrollbar-corner —— 右下角汇合处样式，默认display: none;
    &::-webkit-scrollbar-corner {
      background: rgba(255, 255, 255, 0.6);
      // display: none;
    }
  }
}
</style>

三、组件使用

<searchBox 
  :formItemList="formItemList" 
  @search="search"
  :isShowSearch="isShowSearch"
 >
</searchBox>
// 1.控制组件的显示隐藏 
isShowSearch  值为 boolean 类型
// 2.查询组件返回的值
search(params) {
    console.log('组件选择后返回的值',params)
}
// 3.查询组件配置项
formItemList: [
    // select 框
    {
        label: "项目名称：",
        type: "select",
        filterable: true, // 可以搜索
        selectOptions: [ // select 的 选择项
            { name: 111, value: 111 },
            { name: 222, value: 222 },
        ],
        param: "project_id",
    },
    // input 框
    {
        label: "任务名称：",
        type: "input",
        param: "task_name",
    },
    // daterange (时间区间)框
    {
        label: "举证时间：",
        type: "daterange",
        param: "createdate",
    },
    // 输入框 - 普通文本框 (数字和文字都行)
    {
        label: "普通文本框：",
        type: "input",
        param: "name",
        size: "large", // 输入框的大小
        defaultSelect: "普通文本的默认选中", // 默认值
    },
    // 数字输入框
    {
        label: "数字输入框（限制输入位数2）：",
        type: "inputNumber",
        param: "inputNumber1",
        maxlength: "2", // 限制输入的位数 (不传就不限制)
        // min: "-1", // 数字输入框的最小值
        // size: "large", // large / default / small
    },
    {
        label: "数字输入框最大值（10）：",
        type: "inputNumber",
        param: "inputNumber2",
        maxlength: "2", // 限制输入的位数 (不传就不限制)
        min: "-1",
        max: "10",
    },
    // 文本输入框
    {
        label: "文本输入框（最多6个字符）：",
        type: "inputText",
        param: "inputText1",
        maxlength: "6", // 限制输入的位数 (不传就不限制)
    },
    // 普通单选下拉框
    {
        label: "所属单位（普通单选下拉框）：",
        type: "select",
        selectOptions: [
            { name: 111, value: 111 },
            { name: 222, value: 222 },
            { name: 333, value: 333 },
        ],
        param: "company",
        size: "small", // large / default / small
    },
    // 默认选中下拉框：
    {
        label: "普通下拉框（默认选中）：",
        type: "select",
        selectOptions: [
            { name: 111, value: 111 },
            { name: 222, value: 222 },
            { name: 333, value: 333 },
        ],
        param: "company",
        size: "small", // large / default / small
        defaultSelect: 222,
    },
    // 多选下拉框
    {
        label: "多选下拉框：",
        type: "selectMultiple",
        selectOptions: [
            { name: "多选1", value: 111 },
            { name: "多选2", value: 222 },
            { name: "多选3", value: 333 },
        ],
        param: "stop1",
        size: "small", // large / default / small
        // defaultSelect: [111,222], // 默认选中
    },
    // 时间区间
    {
        label: "排查区间：",
        type: "daterange",
        param: "daterange",
    },
    // 单个日期
    {
        label: "放假日期：",
        type: "date",
        param: "date",
    },
    // 单个日期1
    {
        label: "放假日期1：",
        type: "date",
        param: "date1",
    },
],