logpm_page/src/components/SelectBox/SelectBox.vue

<template>
  <div class="selectBox" ref="selectBox">
    <el-input
      @focus="handleFocus"
      v-model="_computed"
      @input="handleInput"
      :placeholder="props.placeholder"
      @blur="handleBlur"
      @change="handleChange"
      :clearable="props.clearable !== false"
    ></el-input>

    <div
      class="selectContainer"
      :style="
        props.minWidth
          ? props.minWidth === true
            ? 'min-width:400px'
            : 'min-width:' + props.minWidth
          : ''
      "
      v-if="isShowBox"
    >
      <div class="content">
        <SelectComponent
          :className="props.className"
          :handleShow="handleShow"
          :handleClose="handleClose"
        >
          <slot></slot>
        </SelectComponent>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SelectComponent from '@/components/SelectComponent/SelectComponent.vue';
import { ref, onMounted, defineExpose, defineProps, defineEmits, computed } from 'vue';
import { debounce } from '@/utils/util.js';
const query = ref({ serviceNumber: '' });
const isShowBox = ref(false);
const _bodyNode = ref<any>('');

const className = ref('');

const props = defineProps([
  /** 双向绑定的值 */
  'modelValue',
  /** 输入框占位文本 */
  'placeholder',
  'className',
  /** 失焦事件 */
  'blur',
  /** 输入事件 */
  'input',
  /** 改变事件 */
  'change',
  /** 聚焦事件 */
  'focus',
  /** 最小宽度 */
  'minWidth',
  /** 是否清空 : 默认true */
  'clearable',
]);
const $emit = defineEmits(['update:modelValue']);

const _computed = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit('update:modelValue', val);
  },
});

className.value = props.className || '';

const selectBox = ref(null);

onMounted(() => {
  if (className.value) selectBox.value.classList.add(className.value);
});

const handleShow = () => {
  isShowBox.value = true;
};

const handleClose = () => {
  isShowBox.value = false;
};

const handleFocus = () => {
  props.focus && props.focus();
  isShowBox.value = true;
};

const handleBlur = () => {
  console.log('Blur');
  props.blur && props.blur();
};

const handleChange = (value: any) => {
  console.log('Change');
  props.change && props.change(value);
};

const handleInput = debounce(() => {
  props.input && props.input();
  isShowBox.value = true;
}, 500);

defineExpose({ handleShow, handleClose });
</script>

<style lang="scss" scoped>
.selectBox {
  width: 100%;
  position: relative;
  text-align: center;

  .selectContainer {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    line-height: normal;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 0.625vw rgba(0, 0, 0, 0.12);
    animation: dow 0.5s ease-in-out;

    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background: #fff;
      margin: 0 auto;
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      z-index: 1000;
    }

    .content {
      overflow-y: scroll;
      padding: 10px;
      max-height: 200px;
    }
  }
}

@keyframes dow {
  0% {
    display: none;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  1% {
    display: block;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.selectBox-show {
  animation: dow 0.3s ease-in-out;
}

.selectBox-hide {
  animation: dow 0.3s ease-in-out reverse;
}
</style>