jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

<template>
  <ElPopover placement="bottom" popper-class="global-input-search-popover" :popperOptions="popperOptions"
    :visibleArrow="false" :width="this.width" trigger="hover" @show="handleShow">
    <div class='InputSearch' slot="reference" ref="ReferenceInputRef">
      <span>{{ placeholder }}</span>
      <img src="./search.svg">
    </div>

    <div style="width: 100%">
      <slot>
        <Form class="form" :formList="formList" v-bind="getFormConfigOptions" />
        <ElEmpty description="暂无搜索内容"></ElEmpty>
      </slot>

      <div class="footer">
        <Button style="background-color: rgba(0, 179, 204, .3);">
          重置
        </Button>
        <Button>
          搜索
        </Button>
      </div>
    </div>
  </ElPopover>
</template>

<script>
import Button from '@screen/components/Buttons/Button.vue';
import Form from '@screen/components/FormConfig';

export default {
  name: 'InputSearch',
  components: {
    Button,
    Form
  },
  props: {
    placeholder: {
      type: String,
      default: "请点击右侧图标筛选"
    },
    formConfigOptions: {
      type: Object,
      default: null
    },
    formList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      width: null,
      popperOptions: {}
    }
  },
  emit: [
    'handleReset',
    "handleSearch"
  ],
  computed: {
    getFormConfigOptions() {
      return {
        column: "1",
        labelWidth: "120px",
        ...this.formConfigOptions
      }
    }
  },
  methods: {
    handleShow() {
      if (this.width) return;

      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width
    }
  }
}
</script>

<style lang='scss'>
div.el-popper.global-input-search-popover {
  background: #064258;

  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }
}
</style>
<style lang='scss' scoped>
.InputSearch {
  height: 26px;
  background: linear-gradient(180deg, #005C79 0%, #009BCC 100%) !important;
  color: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 15px;
  padding-right: 9px;
  cursor: pointer;

  font-size: 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 14px;
}
</style>